指令的本質(zhì)：類似于taglib
<!DOCTYPE html><html ng-app = "MyModule"> <head> <meta charset="UTF-8"> <title>AngularJS第三特性指令系統(tǒng)</title> </head> <body> <hello></hello> </body> <script src="js/angular-1.3.0.js"></script> <script src="js/HelloAngular_Directive.js"></script></html> 如上HTML代碼中出現(xiàn)了<hello>這個(gè)標(biāo)簽，但是瀏覽器不認(rèn)識<hello>標(biāo)簽，默認(rèn)的執(zhí)行行為就是將其忽略。而AngularJS為了不讓它被忽略，故在js中如下操作：var myModule = angular.module("MyModule", []);myModule.directive("hello",function () { return { restrict: 'E', template: '<div>Hi! Everyone!</div>', replace: true }}); AngularJS一切都是從模塊開始的，所以先創(chuàng)建的模塊myModule，再調(diào)用它的方法directive，指令名稱為hello的標(biāo)簽名，該標(biāo)簽名就是對應(yīng)HTML頁的那個(gè)hello標(biāo)簽名，接著就是function函數(shù)具體操作了。 運(yùn)行起來后，就會發(fā)現(xiàn)，hello已經(jīng)被替換成了模板，另外的restrict和replace函數(shù)，自己可以查一下。運(yùn)行結(jié)果如下：
指令系統(tǒng)的神奇之處就在于，當(dāng)調(diào)用一大堆東西的時(shí)候可以先定義指令，再將其封裝起來，然后調(diào)用起來就會特別爽！其實(shí)上述的ng-app就是一個(gè)指令，相當(dāng)于C#中的main，從這個(gè)指令開始，內(nèi)部的所有標(biāo)簽內(nèi)容就歸AngularJS來管了，也就是說AngularJS是從ng-app來啟動的，只能出現(xiàn)一次。
AngularJS核心特性4---雙向數(shù)據(jù)綁定
先簡單說一下傳統(tǒng)的單向數(shù)據(jù)綁定的處理流程：把模板寫好后，加上數(shù)據(jù)，這個(gè)數(shù)據(jù)可能從后臺服務(wù)端讀出來的，模板和數(shù)據(jù)結(jié)合在一起，通過數(shù)據(jù)綁定機(jī)制，生成HTML標(biāo)簽，在將該HTML標(biāo)簽插入到文檔流中去。
存在的缺點(diǎn)：標(biāo)簽一旦生成就無法變動了，當(dāng)有新數(shù)據(jù)進(jìn)來時(shí)，沒辦法只能重新再來一遍，并整體替換掉。
AngularJS為使過程更優(yōu)雅進(jìn)行，采用了雙向數(shù)據(jù)綁定的形式，核心思想是：視圖與數(shù)據(jù)相對應(yīng)，即視圖上數(shù)據(jù)變化時(shí)，數(shù)據(jù)模型中的數(shù)據(jù)也響應(yīng)變化，數(shù)據(jù)模型變化時(shí)，視圖會自動更新，可借助一個(gè)事件機(jī)制來實(shí)現(xiàn)。如下：
那么HTML中哪些視圖會不斷的變化呢？表單!主要用來收集用戶輸入，很容易變化，通過AngularJS同步到數(shù)據(jù)模型中去！代碼特別簡單，不必書寫js代碼，只需導(dǎo)入相應(yīng)的js庫即可：
<!DOCTYPE html><html ng-app> <head> <meta charset="UTF-8"> <title>AngularJS核心特性4：數(shù)據(jù)雙向綁定</title> </head> <body> <div> <input ng-model="greeting.text" /> <p>{{greeting.text}},AngularJS</p> </div> </body> <script type="text/javascript" src="js/angular-1.3.0.js" ></script></html> 雙花括號代表取值，當(dāng)ng-model變化時(shí)，p標(biāo)簽中的內(nèi)容會自動變化。運(yùn)行結(jié)果：
學(xué)習(xí)了雙向綁定特性后，還請大家思考一下為什么其他前端框架只是單向數(shù)據(jù)綁定，而不實(shí)現(xiàn)雙向的？雙向數(shù)據(jù)綁定又有什么潛在的缺點(diǎn)呢？
新聞熱點(diǎn)
疑難解答
