javascript - ng-repeat动态完成后的Angular JS回调

Question

有大量的帖子展示了如何基于指令拥有回调函数，以便在 ng-repeat 函数完成时您可以等待然后调用函数。例如，这是我的例子。

<div ng-repeat="Object in Objects" class="objectClass" on-finish-render>{{Object.Overlay}</div>

然后当它完成后调用我的函数

.directive('onFinishRender', function ($timeout) {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            if (scope.$last === true) {
                $timeout(function () {
                    scope.$emit('ngRepeatFinished');
                }, 0);
            }
        }
    }
});

完成后成功调用下面的函数

$scope.$on('ngRepeatFinished', function(ngRepeatFinishedEvent) {
    //my code goes here
}

现在，在我第一次设置 $scope.Objects 变量时，所有这些都可以正常工作并且符合预期。我的代码将等到所有对象都被完全渲染然后运行，简直是完美的。但是，如果在最初的所有内容之后我再次更改 $scope.Objects ，我的函数仍将运行但不会等待完成。它实际上可以通过控制台日志看到，第一次循环它会在我进入指令之后但在实际发出之前暂停大约半秒钟，但是在我的 ng-repeat 的后续更改中它不会暂停并且只是在之前调用我的函数dom渲染完成。

这太烦人了，任何帮助都会很棒!

Answer 1

关于 ng-repeat 您应该了解的一件事是它尽可能重用 DOM 元素，因此如果您的中继器中有两个对象并添加第三个，则前两个元素将不会被重用重新渲染。只有第三个会被渲染，因此你的指令的链接函数只会为新添加的对象调用一次。

同样，如果您删除一个项目，您的指令的链接功能将不会再次运行。

观察此 JSFiddle 中的行为.