2020国产成人精品视频,性做久久久久久久久,亚洲国产成人久久综合一区,亚洲影院天堂中文av色

分享

AngularJs中,如何在render完成之后,執(zhí)行Js腳本

 huhuwoo 2015-10-10

AngularJs是Google開源的前端JS框架。使用AngularJs, 我們能夠容易地、健壯的開發(fā)出類似于Gmail一樣的單頁Web應(yīng)用。AngularJs這個新興的MVC前端框架,具有以下特點: MVC, 模塊化,自動化雙向數(shù)據(jù)綁定,語義化標(biāo)簽、依賴注入等。

AngularJs和Jquery的有什么不同?

Jquery的主要目的是簡化Js編寫,專注于瀏覽器跨平臺,主要用來操作DOM.
AngularJs主要關(guān)注Html數(shù)據(jù)的獲取和呈現(xiàn),以及應(yīng)對日益復(fù)雜的Web應(yīng)用需求,使得開發(fā)龐大的Web應(yīng)用能夠更加容易。

AngularJs呈現(xiàn)頁面的原理

AnguarJs提供了一些對于Html進(jìn)行加強的語義標(biāo)簽(directive),這些標(biāo)簽在瀏覽器加載完頁面后被執(zhí)行。舉例來說:

<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, 相當(dāng)于一個for循環(huán)。在頁面加載完成后,AngularJs會遍歷users數(shù)據(jù)對象,來呈現(xiàn)(render)出這個table中的內(nèi)容。

如何實現(xiàn)在render完成之后,執(zhí)行Js腳本

當(dāng)我們使用Jquery結(jié)合AngulraJs使用的時候,希望在render完table后,執(zhí)行一段js腳本,把JqTable應(yīng)用到該table上。在實際開發(fā)中,會經(jīng)常碰到這樣的需求,希望能夠捕獲到AngularJs渲染完成頁面的事件。
要達(dá)到這個目的,我們需要為當(dāng)前的app自定義directive:

app.directive('onFinishRenderFilters', function ($timeout) {
    return {
        restrict: 'A',
        link: function(scope, element, attr) {
            if (scope.$last === true) {
                $timeout(function() {
                    scope.$emit('ngRepeatFinished');
                });
            }
        }
    };
});

然后,在我們需要監(jiān)控的地方,加上該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完成后執(zhí)行的js
          var table = $("#leaderBoard").dataTable({
              bJQueryUI: true,
              "sScrollX": '100%',
          });
});

 

    本站是提供個人知識管理的網(wǎng)絡(luò)存儲空間,所有內(nèi)容均由用戶發(fā)布,不代表本站觀點。請注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息,謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請點擊一鍵舉報。
    轉(zhuǎn)藏 分享 獻(xiàn)花(0

    0條評論

    發(fā)表

    請遵守用戶 評論公約

    類似文章 更多