ng-repeat完成后调用函数

我要实现的基本上是“重复完成渲染”处理程序。我能够检测到何时完成，但无法弄清楚如何从中触发功能。

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

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重复的元素真正完成渲染后$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>

如果要在构造DOM之后但在浏览器呈现之前执行回调（即test（）），请使用$ evalAsync。这将防止闪烁-ref。

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

小提琴。

如果您确实要在渲染后调用回调，请使用$ timeout：

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

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

到目前为止，给出的答案只会在第一次ng-repeat呈现时起作用，但是，如果您具有dynamic 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调用此事件。ngRepeatFinishedng-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它们将毫无用处。

“但是过滤器不应该那样使用！！”

不，他们不是，这是一个hack，如果您不喜欢它，请不要使用它。如果您知道完成同一件事的更好方法，请告诉我。

总结

这是一种技巧，以错误的方式使用它是危险的，仅在ng-repeat完成渲染后才将其用于应用样式，并且不会有任何问题。

如果需要在同一控制器上为不同的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>

其他解决方案可以在初始页面加载时正常工作，但是从控制器调用$ timeout是确保在模型更改时调用函数的唯一方法。这是使用$ timeout 的有效提琴。以您的示例为例：

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

ngRepeat仅在行内容为新内容时才评估指令，因此，如果从列表中删除项目，则不会触发onFinishRender。例如，尝试在这些小提琴进入过滤器值EMIT。

如果您不反对使用双美元范围的道具，并且正在编写仅重复内容的指令，则有一个非常简单的解决方案（假设您只关心初始渲染）。在链接功能中：

const dereg = scope.$watch('$$childTail.$last', last => {
    if (last) {
        dereg();
        // do yr stuff -- you may still need a $timeout here
    }
});

这对于以下情况很有用：您有一条指令需要根据呈现列表成员的宽度或高度进行DOM操作（我认为这是最可能有人问这个问题的原因），但它不是通用的作为已提出的其他解决方案。

过滤后的ngRepeat可以解决此问题，而Mutation事件可以解决此问题，但不建议使用（不立即替换）。

然后我想到了另一个简单的方法：

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.prototype方法，并带有一勾的$ timeout来监视连续的修改。

它的工作原理基本上是正确的，但是我确实遇到了altDone被调用两次的情况。

再次...将此指令添加到ngRepeat 的父级。

很简单，这就是我的方法。

.directive('blockOnRender', function ($blockUI) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            
            if (scope.$first) {
                $blockUI.blockElement($(element).parent());
            }
            if (scope.$last) {
                $blockUI.unblockElement($(element).parent());
            }
        }
    };
})

请看一下小提琴http://jsfiddle.net/yNXS2/。由于您创建的指令没有创建新的作用域，因此我继续进行说明。

$scope.test = function(){... 做到了。

我很惊讶没有看到这个问题的答案中最简单的解决方案。您要执行的操作是ngInit在重复元素（带有ngRepeat伪指令的元素）上添加指令以进行检查$last（范围中设置的特殊变量，ngRepeat该变量指示重复元素是列表中的最后一个）。如果$last为true，则渲染最后一个元素，然后可以调用所需的函数。

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由于ngInit要由Angular.js提供，因此除了要调用的作用域函数（在本例中为）之外，您的应用程序中不需要任何其他JS代码。只要确保您的test功能在作用域中，就可以从模板中对其进行访问：

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