AngularJs是Google開源的前端JS框架。使用AngularJs, 我們能夠容易地、健壯的開發(fā)出類似于Gmail一樣的單頁Web應(yīng)用。AngularJs這個新興的MVC前端框架,具有以下特點: MVC, 模塊化,自動化雙向數(shù)據(jù)綁定,語義化標(biāo)簽、依賴注入等。 AngularJs和Jquery的有什么不同?Jquery的主要目的是簡化Js編寫,專注于瀏覽器跨平臺,主要用來操作DOM. 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渲染完成頁面的事件。 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%', }); });
|
|