详解angular中如何监控dom渲染完毕
刚刚看到群上一个人说，他们公司凡是用angular和jquery插件一起用的人，都被解雇了，没看到这句话之前我很惭愧的说我有这样用过，其实angular的生态系统那么完善，完全可以不用去操作任何的dom元素都可以满足你的提倡开发需求。
那么如果真的需要用某个jquery插件，自己懒得封装angular插件或者懒得去找angular插件的时候，我们该怎么判断dom加载完毕。
有人说使用ng-init=""
亲测：表示没达到我想要的结果....
当然你如果使用window.onload=function(){}的话，不知道行不行，你可以去试试...
我们先了解一下angular的背景：
AngularJs是Google开源的前端JS框架。使用AngularJs,我们能够容易地、健壮的开发出类似于Gmail一样的单页Web应用。AngularJs这个新兴的MVC前端框架，具有以下特点:MVC,模块化，自动化双向数据绑定，语义化标签、依赖注入等。
angular和jquery有什么不同呢？
Jquery的主要目的是简化Js编写，专注于浏览器跨平台，主要用来操作DOM.
AngularJs主要关注Html数据的获取和呈现，以及应对日益复杂的Web应用需求，使得开发庞大的Web应用能够更加容易。
事实上，AnguarJs提供了一些对于Html进行加强的语义标签(directive)，这些标签在浏览器加载完页面后被执行。举例来说:
<tableid=”leaderBoard”>
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<trng-repeat="userinusers">
<td>{{user.Id}}</td>
<td>{{user.Name}}</td>
<td>{{user.Salary}}</td>
</tr>
</tbody>
</table>
上面的ng-repeat，就是一个directive,相当于一个for循环。在页面加载完成后，AngularJs会遍历users数据对象，来呈现(render)出这个table中的内容。
如何实现在render完成之后，执行Js脚本
当我们使用Jquery结合AngulraJs使用的时候，希望在render完table后，执行一段js脚本，把JqTable应用到该table上。在实际开发中，会经常碰到这样的需求，希望能够捕获到AngularJs渲染完成页面的事件。
要达到这个目的，我们需要为当前的app自定义directive:
app.directive('onFinishRenderFilters',function($timeout){
return{
restrict:'A',
link:function(scope,element,attr){
if(scope.$last===true){
$timeout(function(){
scope.$emit('ngRepeatFinished');
});
}
}
};
});
然后，在我们需要监控的地方，加上该directive:
<trng-repeat="userinusers"on-finish-render-filters>
<td>{{user.Id}}</td>
<td>{{user.Name}}</td>
<td>{{user.Salary}}</td>
</tr>
最后，补充上我们需要render完成之后的Js脚本:
$scope.$on('ngRepeatFinished',function(ngRepeatFinishedEvent){
//下面是在tablerender完成后执行的js
vartable=$("#leaderBoard").dataTable({
bJQueryUI:true,
"sScrollX":'100%',
});
});
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。