如何知道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。