剛剛看到群上一個人說，他們公司凡是用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%',     });});

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。