Question

我需要在ng-repeat完成更改dom后更新特定元素的样式。这是我的挑战。当我向模型中添加项目时，我编写的用于触发重复工作的指令就好了，但是当我从项目中删除对象时，它不会被调用。

我添加了一个随机推送和弹出列表中数据的函数。您将看到pop不会触发ng-repeat指令调用。无论如何要解决这个问题？

var module = angular.module('testApp', [])
.directive('onFinishRender', function ($timeout) {
return {
    restrict: 'A',
    link: function (scope, element, attr) {
        if (scope.$last === true) {
            scope.$evalAsync(attr.onFinishRender);
        }
    }
}
});

Fiddle Link

Answer 1

你可以这样做：

<p ng-repeat="t in ta" on-finish-render="test()"
    ng-init="myFunction($last, t)">{{t}}</p>

$scope.myFunction = function(isLast, item){
    if(isLast)
        console.log(item)
}

ng-init是在创建元素时运行的属性 $last是一个布尔值，如果当前元素是true中的最后一个元素，则为ng-repeat。

Updated Fiddle

Answer 2

为什么不使用$ watch？

$scope.$watch('ta', function (newVal, oldValue) {
    if(oldValue.length > 0)
    {
        var i = 0; // do something
    }
}, true);

这样，您可以控制何时将项目推送或弹出到阵列。

http://jsfiddle.net/W8nhv/114/

Answer 3

好吧，你将元素添加到数组。因此，它在渲染时肯定会触发自己的link()函数。请记住，您为数组中的每个元素创建一个onFinishRender 指令，并使用自己的范围

数组长度发生变化后，您想要做什么？也许指令不是正确的尝试。

Answer 4

简单有效的方式

<li ng-repeat="data in dataList" ng-init="$last && $parent.myOnFinishHandler();" ></li>

$ parent 指向存储datalist的范围

angular.module("abc", []).controller('mc', function($scope) {
  $scope.dataList = ["abc", "123", "xyz", "orange", "apple"];
  $scope.myHandler = function() {
    console.log("render finish ");
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="abc">
  <ul ng-controller="mc">
    <li ng-repeat="data in dataList" ng-init="$last && $parent.myHandler();"> {{data}} </li>
  </ul>
</div>

Answer 5

我在one of the other solutions找到了解决方案。

事实证明，没有好方法可以实现此功能。我写了一个基本上做我想做的过滤器。基础是：

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

以上过滤器为每个创建的元素进行广播，然后根据控制器中的侦听事件运行我的手表。

$scope.$on('ngRepeatFinished', function() {
    //Work thy magic
})

要调用此指令，我必须从HTML传递范围，然后通过ngRepeatFinish执行此操作。

<div ng-repeat="item in (items | ngRepeatFinish:this)"></div>

当ng-repeat完成它的工作时触发事件

5 个答案: