本文实例讲述了angularjs监听ng-repeat渲染完成的两种方法。分享给大家供大家参考,具体如下:
监听ng-repeat渲染完成有两种方法
一、最实用的方法:
<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>
对应作用域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完成后执行的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页面的代码,添加标签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>
更多关于angularjs相关内容感兴趣的读者可查看本站专题:《angularjs指令操作技巧总结》、《angularjs入门与进阶教程》及《angularjs mvc架构总结》
希望本文所述对大家angularjs程序设计有所帮助。
如对本文有疑问, 点击进行留言回复!!
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码
分享Angular http interceptors 拦截器使用(推荐)
网友评论