当ng-repeat完成时调用函数 [英] Calling a function when ng-repeat has finished

问题描述

我正在尝试实现的基本上是一个重复完成渲染处理程序。我可以检测到什么时候完成，但我无法弄清楚如何触发一个函数。

检查小提琴：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（）  



< $ c>而是将其包装在$ $ $ $ $ $ $ $ $ $ $ $ $。 $ timeout 确保在ng重复元素完成渲染后执行，因为 $ timeout 将执行当前的摘要循环结束 - ，它也将内部调用 $ apply 与 setTimeout < /强>）。所以在 ng-repeat 完成后，我们使用 $ emit 向外部范围（兄弟和父母范围）

然后在控制器中，您可以使用 $在中捕获它：

$ $（$ ngRepeatFinished），function（ngRepeatFinishedEvent）{
//你还可以获得实际的事件对象
//做东西，执行函数 - 无论...
}）;

使用html看起来像这样：

<项目on-finish-render =ngRepeatFinished>中的pre> < 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/

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("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完成时调用函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！