angular1.0 如何監聽頁面渲染完畢 (轉)
現在 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%',
});
});