我要实现的基本上是一个“对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");
}
}
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/
到目前为止给出的答案只在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;
};
})
这将在每次ng-repeat被渲染时$发出一个名为ngRepeatFinished的事件。
如何使用:
<li ng-repeat="item in (items|ngRepeatFinish) | filter:{name:namedFiltered}" >
ngRepeatFinish过滤器需要直接应用到你的$作用域中定义的数组或对象，你可以应用其他过滤器。
如何不使用它:
<li ng-repeat="item in (items | filter:{name:namedFiltered}) | ngRepeatFinish" >
不要先应用其他过滤器，然后再应用ngRepeatFinish过滤器。
什么时候用这个?
如果您希望在列表完成呈现后将某些css样式应用到DOM中，因为您需要考虑已由ng-repeat重新呈现的DOM元素的新维度。(顺便说一下:这些操作应该在指令中完成)
在处理ngRepeatFinished事件的函数中不要做什么:
不要执行$scope。否则你会把Angular置于一个无穷循环中，Angular将无法检测到。
不要使用它来更改$scope属性，因为这些更改直到下一个$digest循环才会反映在视图中，而且由于您不能执行$scope。$apply它们没有任何用处。
“但是滤镜不是用来这样用的!!”
不，他们不是，这是一个黑客，如果你不喜欢它就不要用它。如果你知道更好的方法来完成同样的事情，请告诉我。
总结
这是一个hack，以错误的方式使用它是危险的，只在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>
