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