現在 angular 已經到5+ 了，目前公司有個 angular1.0 寫的專案做迭代。現在angular 1. 版本都統稱 angular.js 。最新angular 中文文件：https://www.angular.cn/  ；配合angular  使用的 比較好用的兩個 元件庫，有興趣可以看文件

1：https://ng.ant.design/docs/introduce/zh  

介紹： Ant Design 提供了一套非常完整的 元件化設計規範 與 元件化編碼規範，大幅提高了部分產品的設計研發效率及質量。Ant Design 與 G2 的程式碼質量和文件質量都非常高，算是阿里提出 “大中臺，小前臺” 後外面可見的傑出作品。

2：https://material.angular.io/

介紹：Material Design，中文名：材料設計語言，是由Google推出的全新的設計語言，谷歌表示，這種設計語言旨在為手機、平板電腦、桌上型電腦和“其他平臺”提供更一致、更廣泛的“外觀和感覺”。

解決問題！！！

問題描述：ng-repeat 了一組li，想在渲染後的第一個 li 上加樣式。發現加不上，原因是 頁面渲染延遲；

最笨應急方法 寫個延時器，但是不建議用。

網上找了很多方法類似：

有人說使用ng-init=""；

然而並不是我想要的，只有一種保證管用，哈哈【以下引用，問題性質相同，自行取捨】

事實上，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%',
          });
});