events - 在 ng-repeat 完成时调用一个函数

Question

我试图实现的基本上是一个“on ng repeat finished rendering”处理程序。我能够检测到它何时完成，但我不知道如何从中触发函数。

检查 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>

回答:finishingmove 的工作 fiddle :http://jsfiddle.net/paulocoelho/BsMqq/4/

Answer 1

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 中。 $timeout 确保它在 ng-repeated 元素真正完成渲染时执行(因为 $timeout 将在当前摘要周期结束时执行 -- 并且它还会在内部调用 $apply，这与 setTimeout 不同)。因此，在 ng-repeat 完成后，我们使用 $emit 向外部作用域(兄弟作用域和父作用域)发出事件。

然后在您的 Controller 中，您可以使用 $on 捕获它:

$scope.$on('ngRepeatFinished', function(ngRepeatFinishedEvent) {
    //you also get the actual event object
    //do stuff, execute functions -- whatever...
});

html 看起来像这样:

<div ng-repeat="item in items" on-finish-render="ngRepeatFinished">
    <div>{{item.name}}}<div>
</div>