AngularJS監(jiān)聽(tīng)ng-repeat渲染完成的兩種方法
本文實(shí)例講述了AngularJS監(jiān)聽(tīng)ng-repeat渲染完成的兩種方法。分享給大家供大家參考,具體如下:
監(jiān)聽(tīng)ng-repeat渲染完成有兩種方法
一、最實(shí)用的方法:
<ul class="pprt_content"> <li ng-repeat="src in imageHotList track by $index" ng-click='goGoodsDet(src.goodsId,src.merchId)' on-finish-render-filters="completeRepeat"> <img ng-src="{{productUrl}}{{src.imageName}}"> </li> </ul>
對(duì)應(yīng)作用域controller:
$scope.completeRepeate= function(){ alert('1') }
自定義指令directive:
var app = angular.moduler('myApp',[]); app.directive('onFinishRenderFilters', ['$timeout', function ($timeout) { return { restrict: 'A', link: function(scope,element,attr) { if (scope.$last === true) { var finishFunc=scope.$parent[attr.onFinishRenderFilters]; if(finishFunc) { finishFunc(); } } } }; }])
二、使用廣播事件
/* * Controller文件中的代碼 * Setup general page controller */ MetronicApp.controller('simpleManageController', ['$rootScope', '$scope', 'settings','$http', function($rootScope, $scope, settings,$http) { $scope.$on('ngRepeatFinished', function (ngRepeatFinishedEvent) { //下面是在table render完成后執(zhí)行的js FormEditable.init(); Metronic.stopPageLoading(); $(".simpleTab").show(); }); }); MetronicApp.directive('onFinishRenderFilters', function ($timeout) { return { restrict: 'A', link: function(scope,element,attr) { if (scope.$last === true) { $timeout(function() { scope.$emit('ngRepeatFinished'); }); } } }; });
HTML
<!--HTML頁(yè)面的代碼,添加標(biāo)簽onFinishRenderFilters(格式有變):on-finish-render-filters--> <tr style="display: none" class="simpleTab" ng-repeat="simpleProduct in simpleProducts" on-finish-render-filters> <td> {{simpleProduct.productNo}} </td> </tr>
更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《AngularJS指令操作技巧總結(jié)》、《AngularJS入門(mén)與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》
希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。
相關(guān)文章
使用Angular CLI進(jìn)行Build(構(gòu)建)和Serve詳解
這篇文章主要介紹了使用Angular CLI進(jìn)行Build(構(gòu)建)和Serve詳解,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03Angular8引入百度Echarts進(jìn)行圖表分析的實(shí)現(xiàn)代碼
這篇文章主要介紹了Angular8引入百度Echarts進(jìn)行圖表分析的實(shí)現(xiàn)代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11AngularJS 實(shí)現(xiàn)JavaScript 動(dòng)畫(huà)效果詳解
本文主要介紹AngularJS 實(shí)現(xiàn) JavaScript 動(dòng)畫(huà)的資料,這里整理了詳細(xì)的資料和簡(jiǎn)單示例代碼,有興趣的小伙伴可以參考下2016-09-09淺談angular表單提交中ng-submit的默認(rèn)使用方法
今天小編就為大家分享一篇淺談angular表單提交中ng-submit的默認(rèn)使用方法。具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09如何在Angular8.0下使用ngx-translate進(jìn)行國(guó)際化配置
這篇文章主要介紹了如何在Angular8.0下使用ngx-translate進(jìn)行國(guó)際化配置,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07Ionic + Angular.js實(shí)現(xiàn)驗(yàn)證碼倒計(jì)時(shí)功能的方法
驗(yàn)證碼倒計(jì)時(shí)這個(gè)功能相信對(duì)大家每個(gè)人來(lái)說(shuō)都不陌生,之前介紹了在Android中的實(shí)現(xiàn)方法,下面這篇文章主要給大家介紹了利用Ionic + Angular.js實(shí)現(xiàn)驗(yàn)證碼倒計(jì)時(shí)功能的相關(guān)資料,文中介紹的非常詳細(xì),需要的朋友們下面來(lái)一起看看吧。2017-06-06AngularJS基礎(chǔ) ng-options 指令詳解
本文主要介紹AngularJS ng-options 指令,這里對(duì)ng-options指令的知識(shí)做了詳細(xì)整理,并附有詳細(xì)的代碼示例,有需要的小伙伴可以參考下2016-08-08詳解Angular5/Angular6項(xiàng)目如何添加熱更新(HMR)功能
這篇文章主要介紹了詳解Angular5/Angular6項(xiàng)目如何添加熱更新(HMR)功能,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10