如何知道ng-repeat循环的dom已经渲染完成

如何知道ng-repeat循环的dom已经渲染完成

@[ 梁冬 liangdong ]{jenis_9f24jvnh_iihbclab}@

angular拥有自动化渲染DOM的特性，它能帮助我们专注于操作数据，而页面的渲染则由angular自身来完成。

但是。。。 这就造成了一个坑，在我们的 ng-repeat 循环完成后angular并不会告诉我们dom渲染完了。就造成了类似如下的场景下：

我们需要通过知道循环完成了，来计算Dom高度或者宽度时，

哎？

angular这货是在什么时候渲染完的？

一班 情况下有的同学会选择 $timeout 来让他延时计算，不得不说在大多数情况下这个方法是可以的。

但是我们是 二班 同学。

这时候我们就需要用到一个小技巧，一般情况下我会在公用的directive中加入一个指令

define(['app'], function (app) {
'use strict';
app.registerDirective('repeatFinished', ['$timeout', function 	($timeout) {
return {
link: function (scope, elm, attrs) {
if (scope.$last === true) {
var emitMessage = attrs['repeatFinished'] || 'repeatFinished';
$timeout(function () {
scope.$emit(emitMessage);
});
}
}
};
}]);
});

如何调用

<ul>
<li ng-repeat="item in list" repeat-finished="你自己想要定义的事件名" >
{{item.name}}
</li>
</ul>

就是这么简单~~~

该指令的作用是当我们的ng-repeat循环到最后一个时，向上冒泡一个事件名，而我们在需要的地方就可以通过监听这个事件名来知道dom是在何时渲染完成的。

完

PS：如果三班的同学有更好的方法， 请无情的戳我的hi。