AngularJs中，如何在render完成之後，執行Js指令碼

標籤：http   lte   指令碼   編寫   ble   dom   對象   eve   out   

http://www.cnblogs.com/JustRun1983/p/3936371.htm

 

 

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

l

AngularJs中，如何在render完成之後，執行Js指令碼