ng-repeat完成后调用函数

Question

我想要实现的基本上是"on ng repeat finished rendering"处理程序.我能够检测到它何时完成,但我无法弄清楚如何从中触发一个功能.

检查小提琴: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>

答案:来自finishmove的工作小提琴: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向外部作用域(兄弟和父作用域)发出一个事件.

然后在你的控制器中,你可以抓住它$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>

Answer 2

如果希望在构造DOM之后但在浏览器呈现之前执行回调(即test()),请使用$ evalAsync.这样可以防止闪烁 - 参考.

if (scope.$last) {
   scope.$evalAsync(attr.onFinishRender);
}

小提琴.

如果你真的想在渲染后调用你的回调,请使用$ timeout:

if (scope.$last) {
   $timeout(function() { 
      scope.$eval(attr.onFinishRender);
   });
}

我更喜欢$ eval而不是事件.对于事件,我们需要知道事件的名称,并将代码添加到我们的控制器中.使用$ eval,控制器和指令之间的耦合更少.

Answer 3

到目前为止给出的答案仅在第一次ng-repeat呈现时才起作用,但如果您有动态ng-repeat,意味着您将要添加/删除/过滤项目,并且每次需要时都需要通知ng-repeat得到渲染后,这些解决方案将不适合您.

所以,如果你需要每次都被告知ng-repeat重新渲染而不仅仅是第一次,我已经找到了一种方法来做到这一点,它非常'hacky',但如果你知道你是什么,它会工作正常这样做.$filter在ng-repeat 使用任何其他之前$filter使用此功能:

.filter('ngRepeatFinish', function($timeout){
    return function(data){
        var me = this;
        var flagProperty = '__finishedRendering__';
        if(!data[flagProperty]){
            Object.defineProperty(
                data, 
                flagProperty, 
                {enumerable:false, configurable:true, writable: false, value:{}});
            $timeout(function(){
                    delete data[flagProperty];                        
                    me.$emit('ngRepeatFinished');
                },0,false);                
        }
        return data;
    };
})

这将$emit是ngRepeatFinished每次ng-repeat渲染时调用的事件.

如何使用它:

<li ng-repeat="item in (items|ngRepeatFinish) | filter:{name:namedFiltered}" >

该ngRepeatFinish过滤器需要直接应用于Array或Object在你的定义$scope,你可以申请之后其它过滤器.

如何不使用它:

<li ng-repeat="item in (items | filter:{name:namedFiltered}) | ngRepeatFinish" >

不要先应用其他过滤器然后应用ngRepeatFinish过滤器.

我什么时候应该用这个？

如果要在列表完成渲染后将某些css样式应用到DOM中,因为您需要考虑已由其重新呈现的DOM元素的新维度ng-repeat.(顺便说一句:那些操作应该在指令内完成)

在处理ngRepeatFinished事件的函数中不应该做什么:

• 不要$scope.$apply在该函数中执行,或者将Angular置于Angular无法检测到的无限循环中.

• 不要使用它来更改$scope属性,因为这些更改在下一个$digest循环之前不会反映在您的视图中,并且由于您无法执行$scope.$apply它们,因此它们将没有任何用处.

"但过滤器不应该像那样使用!"

不,他们不是,这是一个黑客,如果你不喜欢它不使用它.如果你知道更好的方法来完成同样的事情,请告诉我.

总结

这是一个黑客,并以错误的方式使用它是危险的,仅用于在ng-repeat完成渲染后应用样式,你不应该有任何问题.

Answer 4

如果你需要在同一个控制器上为不同的ng-repeats调用不同的函数,你可以尝试这样的事情:

指令:

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.broadcasteventname ? attr.broadcasteventname : 'ngRepeatFinished');
            });
            }
        }
    }
});

在您的控制器中,使用$ on捕获事件:

$scope.$on('ngRepeatBroadcast1', function(ngRepeatFinishedEvent) {
// Do something
});

$scope.$on('ngRepeatBroadcast2', function(ngRepeatFinishedEvent) {
// Do something
});

在具有多个ng-repeat的模板中

<div ng-repeat="item in collection1" on-finish-render broadcasteventname="ngRepeatBroadcast1">
    <div>{{item.name}}}<div>
</div>

<div ng-repeat="item in collection2" on-finish-render broadcasteventname="ngRepeatBroadcast2">
    <div>{{item.name}}}<div>
</div>

Answer 5

其他解决方案在初始页面加载时可以正常工作,但是从控制器调用$ timeout是确保在模型更改时调用函数的唯一方法.这是一个使用$ timeout 的工作小提琴.对于你的例子,它将是:

.controller('myC', function ($scope, $timeout) {
$scope.$watch("ta", function (newValue, oldValue) {
    $timeout(function () {
       test();
    });
});

ngRepeat只会在行内容为新内容时评估指令,因此如果从列表中删除项目,onFinishRender将不会触发.例如,尝试在这些fiddles emit中输入过滤器值.