在ng-repeat结束时调用函数

我要实现的基本上是一个“对ng重复完成渲染”处理程序。我能够检测它何时完成，但我不知道如何从它触发一个函数。

检查小提琴: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");
}
}

超文本标记语言

<div ng-app="testApp" ng-controller="myC">
<p ng-repeat="t in ta" on-finish-render="test()">{{t}}</p>
</div>
< p > 回答: 工作小提琴从finingmove: http://jsfiddle.net/paulocoelho/BsMqq/4/

146947 次浏览
小开

请看看小提琴，http://jsfiddle.net/yNXS2/。因为你创建的指令没有创建一个新的范围，我继续在这种方式。

$scope.test = function(){...使这种情况发生。

小开
最佳答案 
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-repeat元素真正完成呈现时执行(因为$timeout将在当前摘要周期的末尾执行——并且它也会在内部调用__ABC4，不像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，控制器和指令之间的耦合更少。

小开

其他解决方案在初始页面加载时工作得很好，但是从控制器调用$timeout是确保在模型更改时调用函数的唯一方法。下面是一个工作的小提琴，它使用$timeout。对于你的例子，它将是:

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

ngRepeat只会在行内容为新时计算指令，所以如果你从列表中删除项目，onFinishRender将不会触发。例如，尝试在这些fiddles 发出中输入过滤器值。

小开

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

所以，如果你每次ng-repeat被重新渲染时都需要被通知不仅仅是第一次，我已经找到了一种方法来做到这一点，这是相当“hack”，但如果你知道你在做什么，它会工作得很好。在你的ng-repeat 在使用任何其他$filter之前中使用这个$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;
};
})

这将在每次ng-repeat被渲染时$emit一个名为ngRepeatFinished的事件。

如何使用:

<li ng-repeat="item in (items|ngRepeatFinish) | filter:{name:namedFiltered}" >

ngRepeatFinish过滤器需要直接应用到$scope中定义的Array或Object，之后可以应用其他过滤器。

如何不使用它:

<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完成渲染后应用样式时使用它，你应该不会有任何问题。

小开

使用过滤后的ngRepeat来解决这个问题可以使用突变事件，但它们已被弃用(没有立即替换)。

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

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挂钩。父元素的原型方法，带有一个滴答的$timeout来观察后续的修改。

它的工作基本正确，但我确实得到了一些情况下，altDone将被调用两次。

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

小开

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

该指令:

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>
小开

很简单，我就是这么做的。

. 
.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());
}
}
};
})

小开

如果你不反对使用双重作用域道具，并且你正在编写一个唯一内容是repeat的指令，那么有一个相当简单的解决方案(假设你只关心初始渲染)。在link函数中:

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

这对于需要根据呈现列表成员的宽度或高度执行DOM manip的指令是有用的(我认为这是人们会问这个问题的最可能的原因)，但它不像已经提出的其他解决方案那样通用。

小开
我很惊讶在这个问题的答案中没有看到最简单的解决方案。 你要做的是在你的重复元素(带有ngRepeat指令的元素)上添加一个ngInit指令，检查$last(由ngRepeat在作用域中设置的一个特殊变量，它表明重复元素是列表中的最后一个)。如果$last为真，我们将呈现最后一个元素，并可以调用我们想要的函数 
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");
}

提交答案