NG-重复后角JS回调完成动态 [英] Angular JS callback after ng-repeat is completed dynamically

问题描述

有万吨帖子展示了如何根据指令，有回调函数，这样当NG-重复功能完成后，你可以等待，然后调用一个函数。例如，下面是我的榜样。

There are tons of posts showing how to have callback functions based on a directive so that when an ng-repeat function is finished you can wait and then call a function. For example here is my example.

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

然后完成时，它下面的叫我的功能

Then when it is completed the following calls my function

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

这成功地调用当它完成以下我的功能

This successfully calls my function below when it is completed

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

现在这一切完美的作品，并按照预期的第一次设置我的$ scope.Objects变量。我的code将等到所有对象都完全呈现，然后运行，从字面上完美。但是，如果最初的一切后，我再次改变$ scope.Objects，我的功能将继续运行，但它不会等待完成。它与控制台日志实际上可见，先绕着它走过去将暂停约半秒我去到指令后，但在实际EMIT过，但在随后的修改我的NG-重复它不会停下来之前，简单地调用我的函数在DOM完成渲染。

Now all of that works perfectly and as intended the first time I set my $scope.Objects variable. My code will wait until all objects are fully rendered and then runs, literally perfect. However if after the initial everything I change $scope.Objects again, my function will still run but it will NOT wait for the completion. Its actually visible with console logs, the first go round it will pause for about half a second after I go into the directive but before the actual emit, but on subsequent changes to my ng-repeat it does not pause and simply calls my function before the dom is finished rendering.

这是超级讨厌任何帮助将是巨大的！

This is super annoying and any help would be great!

推荐答案

角的$放出，$广播和$下常见的秋季发布/订阅的设计模式，还是能做到的，在你发布事件和订阅/退订别处。该角事件系统是辉煌的，它使事情无瑕易做（如你所期望！），但它背后的概念不是那么简单掌握，你经常可以在想为什么事情没有，你的工作认为他们可能。

Angular’s $emit, $broadcast and $on fall under the common "publish/subscribe" design pattern, or can do, in which you’d publish an event and subscribe/unsubscribe to it somewhere else. The Angular event system is brilliant, it makes things flawless and easy to do (as you’d expect!) but the concept behind it isn’t so simple to master and you can often be left wondering why things don’t work as you thought they might.

使用$范围。$放出将触发一个事件了$范围。运用
  $范围。$直播将火降则$范围的事件。使用$范围。在$
  是我们如何监听这些事件。 （参考）

Using $scope.$emit will fire an event up the $scope. Using $scope.$broadcast will fire an event down the $scope. Using $scope.$on is how we listen for these events. (reference)

我已经按照你的问题提供了两个解决方案。

I have provided two solution according to your problem.

解决方案一

<div ng-controller="MyCtrl">
    <div ng-repeat="Object in Objects" class="objectClass" on-finish-render isolated-expression-foo="updateItem(item,temp)">{{Object|json}</div>
</div>

var app = angular.module('app', []);    
app.directive('onFinishRender', function () {
    return {
        restrict: 'A',
        scope: {
            isolatedExpressionFoo: '&'
        },
        link: function (scope, element, attr) {
            if (scope.$parent.$last) {
                scope.isolatedExpressionFoo({ temp: "some value" });
            }
        }
    };
});

app.controller('MyCtrl', ['$scope', function ($scope) {

    $scope.Objects = [{ id: 1, value: "test" }, { id: 2, value: "TEst2" }];

    $scope.updateItem = function (item, temp) {
        console.log("Item param " + item.id);
        console.log("temp param " + temp);
    }
}]);

解决方案二

<div ng-controller="MyCtrl">
     <div ng-repeat="Object in Objects" class="objectClass" on-finish-render>{{Object|json}</div>
</div>

var app = angular.module('app', []);    
app.directive('onFinishRender', function ($rootScope) {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            if (scope.$last) {
                $rootScope.$broadcast("ngRepeatFinished", { temp: "some value" });
            }
        }
    };
});

app.controller('MyCtrl', ['$scope', function ($scope) {

    $scope.Objects = [{ id: 1, value: "test" }, { id: 2, value: "TEst2" }];

    $scope.$on('ngRepeatFinished', function (temp) {
        console.log("Item param " + temp);
    });

}]);

这篇关于NG-重复后角JS回调完成动态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！