详解angular中如何监控dom渲染完毕

作者: 我不猥琐-_-只是闷骚
来源: 51数据库
2021-09-02

刚刚看到群上一个人说，他们公司凡是用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)，这些标签在浏览器加载完页面后被执行。举例来说:

<table id=”leaderboard”>
     <thead>
       <tr>
         <th>id</th>
         <th>name</th>
         <th>salary</th>
       </tr>
     </thead>
     <tbody>
       <tr ng-repeat="user in users">
         <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:

<tr ng-repeat="user in users" on-finish-render-filters>
   <td>{{user.id}}</td>
   <td>{{user.name}}</td>
   <td>{{user.salary}}</td>
</tr>

最后，补充上我们需要render完成之后的js脚本:

$scope.$on('ngrepeatfinished', function (ngrepeatfinishedevent) {
     //下面是在table render完成后执行的js
     var table = $("#leaderboard").datatable({
       bjqueryui: true,
       "sscrollx": '100%',
     });
});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。