AngularJs是Google开源的前端JS框架。使用AngularJs, 我们能够容易地、健壮的开发出类似于Gmail一样的单页Web应用。这篇文章主要介绍了详解angular中如何监控dom渲染完毕，有兴趣的可以了解一下。
在AngularJS中，DOM（文档对象模型）渲染完毕的监控是一个关键点，特别是在与jQuery插件集成或需要在特定时间点执行JavaScript代码时。AngularJS作为一个强大的前端框架，提供了多种方式来处理DOM操作和事件监听，以确保在适当的时间执行相应的逻辑。
AngularJS的核心特性之一是双向数据绑定，这意味着视图（HTML）和模型（JavaScript对象）之间的自动同步。AngularJS通过指令（directives）来扩展HTML的功能，如`ng-repeat`，它在页面加载后用于遍历数据并动态生成DOM元素。
例如，在提供的代码片段中，`<tr ng-repeat="user in users">`会根据`users`数组中的每一项创建一个新的表格行。AngularJS会负责跟踪数据变化，并自动更新对应的DOM元素。但需要注意的是，`ng-repeat`的渲染过程是异步的，这意味着在某些情况下，DOM可能还没有完全生成，这时直接执行基于DOM的JavaScript代码可能会遇到问题。
为了在DOM渲染完成后再执行JavaScript代码，我们可以自定义AngularJS指令。在上述例子中，创建了一个名为`onFinishRenderFilters`的指令，它会在`ng-repeat`迭代完成时发出一个事件。指令的`link`函数检查`scope.$last`属性，如果其值为`true`，表示当前迭代是数组的最后一个元素，这时调用`$timeout`服务确保在AngularJS的下一个事件循环中执行回调，即`scope.$emit('ngRepeatFinished')`。
在需要监控的`ng-repeat`元素上添加`on-finish-render-filters`属性，这样就能确保在`ng-repeat`渲染完成后触发自定义的事件。接下来，我们在AngularJS的 `$scope` 上监听这个事件，以执行相应的JavaScript代码：
```javascript
$scope.$on('ngRepeatFinished', function (ngRepeatFinishedEvent) {
// 这里是在table渲染完成后执行的js
var table = $("#leaderBoard").dataTable({
bJQueryUI: true,
"sScrollX": '100%',
...
});
});
```
在这个示例中，当`ngRepeatFinished`事件被触发时，会初始化一个jQuery的DataTables插件，对表格进行进一步的增强和功能添加。
AngularJS与jQuery的主要区别在于它们的设计哲学。jQuery主要关注DOM操作和浏览器兼容性，而AngularJS更注重数据绑定和组件化，以构建复杂的应用程序。尽管AngularJS提供了一套完整的生态系统，但在某些场景下，如需要使用成熟的jQuery插件，可以通过上述方法来确保在AngularJS渲染完成后安全地执行jQuery代码。
监控AngularJS中的DOM渲染完成需要理解其异步渲染的机制，并利用自定义指令和事件监听来实现。通过这种方式，开发者可以在正确的时间点执行依赖DOM结构的代码，确保代码的稳定性和正确性。
