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

问题描述

我想实现基本上是一个关于NG重复完成渲染处理程序。我可以当它完成检测，但我无法弄清楚如何从它触发功能。

检查小提琴： http://jsfiddle.net/paulocoelho/BsMqq/3/

JS

  VAR模块= angular.module（'testApp'，[]）
    .directive（'onFinishRender'，函数（）{
    返回{
        限制：'A'，
        链接：功能（范围，元素，属性）{
            如果（$范围。最后===真）{
                element.ready（函数（）{
                    的console.log（呼吁：+ attr.onFinishRender）;
                    //调用测试下面！
                }）;
            }
        }
    }
}）;功能MYC（$范围）{
    $ scope.ta = [1，2，3，4，5，6]。
    功能测试（）{
        的console.log（测试执行）;
    }
}
 

HTML

 ＆LT; D​​IV NG-应用=testAppNG控制器=MYC＆GT;
    ＆LT; p NG重复=吨TA上完成渲染=测试（）＆GT; {【T】}＆LT; / P＆GT;
＆LT; / DIV＆GT;
 

答：
从finishingmove工作小提琴： http://jsfiddle.net/paulocoelho/BsMqq/4/

解决方案

  VAR模块= angular.module（'testApp'，[]）
    .directive（'onFinishRender'，函数（$超时）{
    返回{
        限制：'A'，
        链接：功能（范围，元素，属性）{
            如果（$范围。最后===真）{
                $超时（函数（）{
                    。范围$放出（'ngRepeatFinished'）;
                }）;
            }
        }
    }
}）;
 

请注意，我没有使用。就绪（）而是把它包在 $超时。 $超时使得当NG-重复的元素确实呈现完毕（因为 $超时将在执行确保它的执行目前的消化周期结束 - ，它也将调用 $适用内部，不像的setTimeout ）。因此，后纳克重复完成后，我们使用 $发出发出一个事件外范围（兄弟姐妹和父母范围）。

然后在你的控制器，你可以用 $赶上它：

  $范围。在$（'ngRepeatFinished'，函数（ngRepeatFinishedEvent）{
    //你也可以得到实际的事件对象
    //做的东西，执行的功能 - 无论...
}）;
 

使用HTML，看起来是这样的：

 ＆LT; D​​IV NG重复=项中的项目上完成渲染=ngRepeatFinished＆GT;
    ＆LT; D​​IV＆GT; {{item.name}}}＆LT; D​​IV＆GT;
＆LT; / DIV＆GT;
 

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('ngRepeatFinished');
                });
            }
        }
    }
});

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