|
AngularJs是Google開(kāi)源的前端JS框架。使用AngularJs, 我們能夠容易地、健壯的開(kāi)發(fā)出類(lèi)似于Gmail一樣的單頁(yè)Web應(yīng)用。AngularJs這個(gè)新興的MVC前端框架，具有以下特點(diǎn): MVC, 模塊化，自動(dòng)化雙向數(shù)據(jù)綁定，語(yǔ)義化標(biāo)簽、依賴注入等。 AngularJs和Jquery的有什么不同?Jquery的主要目的是簡(jiǎn)化Js編寫(xiě)，專(zhuān)注于瀏覽器跨平臺(tái)，主要用來(lái)操作DOM. AngularJs呈現(xiàn)頁(yè)面的原理AnguarJs提供了一些對(duì)于Html進(jìn)行加強(qiáng)的語(yǔ)義標(biāo)簽(directive)，這些標(biāo)簽在瀏覽器加載完頁(yè)面后被執(zhí)行。舉例來(lái)說(shuō): <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，就是一個(gè)directive, 相當(dāng)于一個(gè)for循環(huán)。在頁(yè)面加載完成后，AngularJs會(huì)遍歷users數(shù)據(jù)對(duì)象，來(lái)呈現(xiàn)(render)出這個(gè)table中的內(nèi)容。 如何實(shí)現(xiàn)在render完成之后，執(zhí)行Js腳本當(dāng)我們使用Jquery結(jié)合AngulraJs使用的時(shí)候，希望在render完table后，執(zhí)行一段js腳本，把JqTable應(yīng)用到該table上。在實(shí)際開(kāi)發(fā)中，會(huì)經(jīng)常碰到這樣的需求，希望能夠捕獲到AngularJs渲染完成頁(yè)面的事件。 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>
最后，補(bǔ)充上我們需要render完成之后的Js腳本: $scope.$on('ngRepeatFinished', function (ngRepeatFinishedEvent) {
//下面是在table render完成后執(zhí)行的js
var table = $("#leaderBoard").dataTable({
bJQueryUI: true,
"sScrollX": '100%',
});
});
|
|
|
