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