angularjs – 当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>

:从finishingmove工作小提琴: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-repeated元素已经完成渲染$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>

如果你希望你的回调函数(即test())在构造DOM之后,但在浏览器呈现之前执行,那么使用$ evalAsync。这将防止闪烁 – 参考

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

小提琴

如果您确实想在渲染后调用回调函数,请使用$ timeout:

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

我更喜欢$ eval而不是事件。通过一个事件,我们需要知道事件的名称,并为该事件添加代码给我们的控制器。使用$ eval时,控制器和指令之间的耦合就会减少。


到目前为止所给出的答案只会在ng-repeat获得渲染时才起作用,但如果您有一个动态的ng-repeat,这意味着您将要添加/删除/过滤项目,并且每次都需要通知您ng-repeat得到渲染,这些解决方案将不适合你。

所以,如果你需要每次ng-repeat都得到重新呈现的通知,而不仅仅是第一次,我已经找到了一种方法来做到这一点,这是相当’黑客’,但它会工作得很好,如果你知道你是什么这样做。使用这个$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;
    };
})

这会$emitngRepeatFinished每次ng-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重新呈现的DOM元素的新维度ng-repeat。(顺便说一下,这些操作应该在指令内完成)

在处理ngRepeatFinished事件的函数中不应该做什么:

  • 不要$scope.$apply在那个函数中执行一个,否则你会把Angular放在Angular无法检测到的无限循环中。
  • 不要用它来修改$scope属性,因为直到下一个$digest循环,这些更改才会反映在视图中,并且由于您无法执行这些更改,因此这些更改$scope.$apply不会有任何用处。

“但过滤器并不意味着要这样使用!!”

不,他们不是,这是一个黑客,如果你不喜欢它不使用它。如果你知道更好的方法来完成同样的事情,请让我知道它。

总结

这是一种黑客行为,以错误的方式使用它是危险的,只能在ng-repeat完成渲染之后应用样式,并且不应该有任何问题。

添加评论

友情链接:蝴蝶教程