AngularJs是Google開源的前端JS框架。使用AngularJs染坯, 我們能夠容易地均芽、健壯的開發(fā)出類似于Gmail一樣的單頁Web應(yīng)用。AngularJs這個(gè)新興的MVC前端框架酒请,具有以下特點(diǎn): MVC骡技, 模塊化,自動(dòng)化雙向數(shù)據(jù)綁定羞反,語義化標(biāo)簽布朦、依賴注入等。
AngularJs和Jquery的有什么不同?
Jquery的主要目的是簡(jiǎn)化Js編寫昼窗,專注于瀏覽器跨平臺(tái)是趴,主要用來操作DOM.
AngularJs主要關(guān)注Html數(shù)據(jù)的獲取和呈現(xiàn),以及應(yīng)對(duì)日益復(fù)雜的Web應(yīng)用需求澄惊,使得開發(fā)龐大的Web應(yīng)用能夠更加容易唆途。
AngularJs呈現(xiàn)頁面的原理
AnguarJs提供了一些對(duì)于Html進(jìn)行加強(qiáng)的語義標(biāo)簽(directive),這些標(biāo)簽在瀏覽器加載完頁面后被執(zhí)行掸驱。舉例來說:
Id
Name
Salary
{{user.Id}}
{{user.Name}}
{{user.Salary}}
上面的ng-repeat肛搬,就是一個(gè)directive, 相當(dāng)于一個(gè)for循環(huán)毕贼。在頁面加載完成后温赔,AngularJs會(huì)遍歷users數(shù)據(jù)對(duì)象,來呈現(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í)際開發(fā)中,會(huì)經(jīng)常碰到這樣的需求枉氮,希望能夠捕獲到AngularJs渲染完成頁面的事件志衍。
要達(dá)到這個(gè)目的,我們需要為當(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:
{{user.Id}}
{{user.Name}}
{{user.Salary}}
最后俘侠,補(bǔ)充上我們需要render完成之后的Js腳本:
$scope.$on('ngRepeatFinished'象缀, function (ngRepeatFinishedEvent) {
//下面是在table render完成后執(zhí)行的js
var table = $("#leaderBoard").dataTable({
bJQueryUI: true,
"sScrollX": '100%'爷速,
});
});