当ng-repeat完成时调用函数

本文介绍了当ng-repeat完成时调用函数的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 我正在尝试实现的基本上是一个重复完成渲染处理程序。我可以检测到什么时候完成，但我无法弄清楚如何触发一个函数。 检查小提琴：http://jsfiddle.net/paulocoelho/BsMqq/3/ JS var module = angular.module（'testApp'，[]） .directive（'onFinishRender'，function { return { restrict：'A'， link：function（scope，element，attr）{ if（scope。$ last === true）{ element.ready（function（）{ console.log（call：+ attr.onFinishRender）; // CALL TEST here！}）; } } } }）; 函数myC（$ scope）{ $ scope.ta = [1，2，3，4，5，6]; function test（）{ console.log（test executed）; } } HTML < divng-app =testAppng-controller =myC> < p ng-repeat =t in taon-finish-render =test（）> {{t}}< / p> < / div> 答案：从finishmove工作的小提琴： http://jsfiddle.net/paulocoelho/BsMqq/4/ 解决方案 var module = angular.module（'testApp'，[]） .directive（'onFinishRender'，function（$ timeout） { return { restrict：'A'， link：function（scope，element，attr）{ if（scope。$ last === true）{ $ timeout（function（）{ scope。$ emit（attr.onFinishRender）; }）; } } } } ）;请注意，我没有使用 .ready（） 而是将其包装在$ $ $ $ $ $ $ $ $ $ $ $ $。 $ timeout 确保在ng重复元素完成渲染后执行，因为 $ timeout 将执行当前的摘要循环结束 - ，它也将内部调用 $ apply 与 setTimeout ）。所以在 ng-repeat 完成后，我们使用 $ emit 向外部范围（兄弟和父母范围） 然后在控制器中，您可以使用 $在中捕获它： $ $（$ ngRepeatFinished），function（ngRepeatFinishedEvent）{ //你还可以获得实际的事件对象 //做东西，执行函数 - 无论... }）; 使用html看起来像这样： < divng-repeat = < div> {{item.name}}}< div> < / div> What I am trying to implement is basically a "on ng repeat finished rendering" handler. I am able to detect when it is done but I can't figure out how to trigger a function from it.Check the fiddle:http://jsfiddle.net/paulocoelho/BsMqq/3/JSvar module = angular.module('testApp', []) .directive('onFinishRender', function () { return { restrict: 'A', link: function (scope, element, attr) { if (scope.$last === true) { element.ready(function () { console.log("calling:"+attr.onFinishRender); // CALL TEST HERE! }); } } }});function myC($scope) { $scope.ta = [1, 2, 3, 4, 5, 6]; function test() { console.log("test executed"); }}HTML<div ng-app="testApp" ng-controller="myC"> <p ng-repeat="t in ta" on-finish-render="test()">{{t}}</p></div>Answer:Working fiddle from finishingmove: http://jsfiddle.net/paulocoelho/BsMqq/4/ 解决方案 var module = angular.module('testApp', []) .directive('onFinishRender', function ($timeout) { return { restrict: 'A', link: function (scope, element, attr) { if (scope.$last === true) { $timeout(function () { scope.$emit(attr.onFinishRender); }); } } }});Notice that I didn't use .ready() but rather wrapped it in a $timeout. $timeout makes sure it's executed when the ng-repeated elements have REALLY finished rendering (because the $timeout will execute at the end of the current digest cycle -- and it will also call $apply internally, unlike setTimeout). So after the ng-repeat has finished, we use $emit to emit an event to outer scopes (sibling and parent scopes).And then in your controller, you can catch it with $on:$scope.$on('ngRepeatFinished', function(ngRepeatFinishedEvent) { //you also get the actual event object //do stuff, execute functions -- whatever...});With html that looks something like this:<div ng-repeat="item in items" on-finish-render="ngRepeatFinished"> <div>{{item.name}}}<div></div> 这篇关于当ng-repeat完成时调用函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！