ng-repeat完成后调用函数

时间：2013-03-04 17:51:48

标签： events angularjs handler directive ready

我想要实现的基本上是“on ng repeat finished rendering”处理程序。我能够检测到它何时完成，但我无法弄清楚如何从中触发一个函数。

检查小提琴：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>

答案： 来自finishmove的工作小提琴：http://jsfiddle.net/paulocoelho/BsMqq/4/

10 个答案:

答案 0 :(得分：396)

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中。 {ng}重复元素真正完成渲染时$timeout确保执行它（因为$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>

答案 1 :(得分：87)

如果希望在构造DOM之后但在浏览器呈现之前执行回调（即test（）），请使用$evalAsync。这样可以防止闪烁 - ref。

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

Fiddle

如果你真的想在渲染后调用你的回调，请使用$ timeout：

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

我更喜欢$ eval而不是事件。对于事件，我们需要知道事件的名称，并将代码添加到我们的控制器中。使用$ eval，控制器和指令之间的耦合更少。

答案 2 :(得分：28)

到目前为止给出的答案仅在第一次ng-repeat呈现时有效，但如果您有动态ng-repeat，则表示您是将要添加/删除/过滤项目，并且每次呈现ng-repeat时都需要通知您，这些解决方案将不适合您。

所以，如果您需要每次都被通知ng-repeat重新呈现而不仅仅是第一次，我找到了一种方法来做到这一点，它是相当的'hacky'，但如果你知道自己在做什么，它会很好。在使用任何其他$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;
    };
})

每次$emit呈现时，ngRepeatFinished都会发生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中，因为您需要考虑ng-repeat重新呈现的DOM元素的新维度。 （顺便说一句：那些操作应该在指令内完成）

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

  • 不要在该函数中执行$scope.$apply，否则您会将Angular置于Angular无法检测的无限循环中。

  • 请勿使用它在$scope属性中进行更改，因为在下一个$digest循环之前，这些更改不会反映在您的视图中，并且因为您无法执行$scope.$apply他们没有任何用处。

“但过滤器不应该像那样使用!!”

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

综述

  

这是一个黑客，并且以错误的方式使用它是危险的，仅在ng-repeat完成渲染后应用样式并且您不应该有任何问题。

答案 3 :(得分：11)

如果你需要在同一个控制器上为不同的ng-repeats调用不同的函数，你可以尝试这样的事情：

指令： 

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.broadcasteventname ? attr.broadcasteventname : 'ngRepeatFinished');
            });
            }
        }
    }
});

在您的控制器中，使用$ on：

捕获事件 
$scope.$on('ngRepeatBroadcast1', function(ngRepeatFinishedEvent) {
// Do something
});

$scope.$on('ngRepeatBroadcast2', function(ngRepeatFinishedEvent) {
// Do something
});

在包含多个ng-repeat的模板中 

<div ng-repeat="item in collection1" on-finish-render broadcasteventname="ngRepeatBroadcast1">
    <div>{{item.name}}}<div>
</div>

<div ng-repeat="item in collection2" on-finish-render broadcasteventname="ngRepeatBroadcast2">
    <div>{{item.name}}}<div>
</div>

答案 4 :(得分：5)

其他解决方案在初始页面加载时可以正常工作，但是从控制器调用$ timeout是确保在模型更改时调用函数的唯一方法。这是一个使用$ timeout的工作fiddle。对于你的例子，它将是：

.controller('myC', function ($scope, $timeout) {
$scope.$watch("ta", function (newValue, oldValue) {
    $timeout(function () {
       test();
    });
});

ngRepeat只会在行内容为新内容时评估指令，因此如果从列表中删除项目，onFinishRender将不会触发。例如，尝试在这些小提琴emit中输入过滤器值。

答案 5 :(得分：4)

如果你不反对使用双美元范围的道具并且你正在编写一个只有内容重复的指令，那么有一个非常简单的解决方案（假设你只关心初始渲染）。在链接功能中：

const dereg = scope.$watch('$$childTail.$last', last => {
    if (last) {
        dereg();
        // do yr stuff -- you may still need a $timeout here
    }
});

这对于你有一个指令需要根据渲染列表的成员的宽度或高度进行DOM操作的情况很有用（我认为这是最有可能提出这个问题的原因），但它是不像已提出的其他解决方案那样通用。

答案 6 :(得分：1)

使用过滤的ngRepeat解决此问题的解决方案可能是Mutation个事件，但不推荐使用（不立即替换）。

然后我想到了另一个简单的问题：

app.directive('filtered',function($timeout) {
    return {
        restrict: 'A',link: function (scope,element,attr) {
            var elm = element[0]
                ,nodePrototype = Node.prototype
                ,timeout
                ,slice = Array.prototype.slice
            ;

            elm.insertBefore = alt.bind(null,nodePrototype.insertBefore);
            elm.removeChild = alt.bind(null,nodePrototype.removeChild);

            function alt(fn){
                fn.apply(elm,slice.call(arguments,1));
                timeout&&$timeout.cancel(timeout);
                timeout = $timeout(altDone);
            }

            function altDone(){
                timeout = null;
                console.log('Filtered! ...fire an event or something');
            }
        }
    };
});

这挂钩到父元素的Node.prototype方法中，只需一次勾选$ timeout即可观察连续修改。

它的工作原理大多正确，但我确实得到了一些可以调用altDone两次的情况。

再次......将此指令添加到ngRepeat的父。

答案 7 :(得分：1)

很简单，这就是我做的。

＆＃13;
＆＃13; 
.directive('blockOnRender', function ($blockUI) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            
            if (scope.$first) {
                $blockUI.blockElement($(element).parent());
            }
            if (scope.$last) {
                $blockUI.unblockElement($(element).parent());
            }
        }
    };
})
＆＃13;
＆＃13;
＆＃13;

答案 8 :(得分：0)

请看一下小提琴，http://jsfiddle.net/yNXS2/。由于您创建的指令未创建新范围，因此我继续使用。

$scope.test = function(){...实现了这一点。

答案 9 :(得分：0)

对于这个问题的答案中没有找到最简单的解决方案，我感到非常惊讶。 您想要做的是在重复的元素（带有ngInit指令的元素）上添加ngRepeat指令，检查$last（ngRepeat在范围内设置的特殊变量）表示重复的元素是列表中的最后一个）。如果$last为true，则将渲染最后一个元素，然后可以调用所需的函数。

ng-init="$last && test()"

HTML标记的完整代码为：

<div ng-app="testApp" ng-controller="myC">
    <p ng-repeat="t in ta" ng-init="$last && test()">{{t}}</p>
</div>

由于您要调用的范围函数（在本例中为test）中不需要任何额外的JS代码，因为ngInit由Angular.js提供。只需确保您的test函数在作用域中，以便可以从模板对其进行访问：

$scope.test = function test() {
    console.log("test executed");
}
相关问题
最新问题