AngularJs中，如何在render完成以后，执行Js脚本

AngularJs是Google开源的前端JS框架。使用AngularJs, 咱们可以容易地、健壮的开发出相似于Gmail同样的单页Web应用。AngularJs这个新兴的MVC前端框架，具备如下特色: MVC, 模块化，自动化双向数据绑定，语义化标签、依赖注入等。

AngularJs和Jquery的有什么不一样?

Jquery的主要目的是简化Js编写，专一于浏览器跨平台，主要用来操做DOM. AngularJs主要关注Html数据的获取和呈现，以及应对日益复杂的Web应用需求，使得开发庞大的Web应用可以更加容易。

AngularJs呈现页面的原理

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%',
          });
});