我要实现的基本上是一个“对ng重复完成渲染”处理程序。我能够检测它何时完成,但我不知道如何从它触发一个函数。

检查小提琴: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: http://jsfiddle.net/paulocoelho/BsMqq/4/


当前回答

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

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

ngRepeat只会在行内容为新时计算指令,所以如果你从列表中删除项目,onFinishRender将不会触发。例如,尝试在这些fiddles发射中输入过滤器值。

其他回答

我很惊讶在这个问题的答案中没有找到最简单的解决方案。 你要做的是在你的repeat元素(带有ngRepeat指令的元素)上添加一个ngInit指令,检查$last (ngRepeat在作用域中设置的一个特殊变量,它表明重复元素是列表中的最后一个)。如果$last为真,我们将呈现最后一个元素,并可以调用我们想要的函数。

ng-init="$last && test()"

HTML标记的完整代码如下:

<div ng-app="testApp" ng-controller="myC">
    <p ng-repeat="t in ta" ng-init="$last && test()">{{t}}</p>
</div>

除了你想要调用的作用域函数(在本例中是test),你不需要在应用程序中添加任何额外的JS代码,因为ngInit是由Angular.js提供的。只要确保你的测试函数在作用域中,这样就可以从模板中访问它:

$scope.test = function test() {
    console.log("test executed");
}

使用过滤后的ngRepeat解决这个问题的方法可以是使用突变事件,但它们已被弃用(没有立即替换)。

然后我想到了另一个简单的问题:

app.directive('filtered',function($timeout) {
    return {
        restrict: 'A',link: function (scope,element,attr) {
            var elm = element[0]
                ,nodePrototype = Node.prototype
                ,timeout
                ,slice = Array.prototype.slice
            ;

            elm.insertBefore = alt.bind(null,nodePrototype.insertBefore);
            elm.removeChild = alt.bind(null,nodePrototype.removeChild);

            function alt(fn){
                fn.apply(elm,slice.call(arguments,1));
                timeout&&$timeout.cancel(timeout);
                timeout = $timeout(altDone);
            }

            function altDone(){
                timeout = null;
                console.log('Filtered! ...fire an event or something');
            }
        }
    };
});

这与Node挂钩。父元素的原型方法,带有一个滴答的$timeout来观察后续的修改。

它的工作基本正确,但我确实得到了一些情况下,altDone将被调用两次。

再次……将这个指令添加到ngRepeat的父类。

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

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

ngRepeat只会在行内容为新时计算指令,所以如果你从列表中删除项目,onFinishRender将不会触发。例如,尝试在这些fiddles发射中输入过滤器值。

很简单,我就是这么做的。

.directive('blockOnRender', function ($blockUI) { 返回{ 限制:' A ', 链接:函数(范围,元素,attrs) { If (scope.$first) { (blockUI.blockElement美元(元素).parent ()); } If (scope.$last) { (blockUI.unblockElement美元(元素).parent ()); } } }; })

到目前为止给出的答案只在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;
    };
})

这将在每次ng-repeat被渲染时$发出一个名为ngRepeatFinished的事件。

如何使用:

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

ngRepeatFinish过滤器需要直接应用到你的$作用域中定义的数组或对象,你可以应用其他过滤器。

如何不使用它:

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

不要先应用其他过滤器,然后再应用ngRepeatFinish过滤器。

什么时候用这个?

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

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

不要执行$scope。否则你会把Angular置于一个无穷循环中,Angular将无法检测到。 不要使用它来更改$scope属性,因为这些更改直到下一个$digest循环才会反映在视图中,而且由于您不能执行$scope。$apply它们没有任何用处。

“但是滤镜不是用来这样用的!!”

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

总结

这是一个hack,以错误的方式使用它是危险的,只在ng-repeat完成渲染后应用样式时使用它,你应该不会有任何问题。