当ng repeat完成一个事件时触发它'’s的工作

Firing an event when ng-repeat has finished it's work

本文关键字：工作 事件 repeat ng 一个      更新时间：2023-09-26

在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

您可以这样做：

<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是在创建元素时运行的属性
如果当前元素是ng-repeat中的最后一个元素，则$last是true的布尔值。

更新的Fiddle

为什么不使用$watch？

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

通过这种方式，您可以控制何时向数组中推送或弹出项目。

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

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

数组长度更改后，您想做什么？也许指令不是正确的尝试。

简单有效的方法

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

$parent指向存储数据列表的范围

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>

我发现解决方案在其他解决方案中四处寻找。

事实证明，没有好的方法来实现这一功能。我写了一个过滤器，它基本上做我想做的事情

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前面的this来完成。

<div ng-repeat="item in (items | ngRepeatFinish:this)"></div>
相关文章：