AngularJS指令的詳解

　　指令做爲AngularJS中最爲重要的部分，因此這個框架自己也是自帶了比較多的的指令，可是在開發中，這些指令一般不能知足咱們的須要，因此咱們也是須要自定義一些指令的。指令是咱們用來擴展瀏覽器能力的技術之一。在DOM編譯期間，和HTML元素關聯着的指令會被檢測到，而且被執行。這使得指令能夠爲DOM指定行爲，或者改變它。

　　angular在編譯期間，編譯器會用$interpolate服務去檢查文本中是否嵌入了表達式。這個表達式會被當成一個監視器同樣註冊，而且做爲$digest循環中的一部分，它會自動更新。

　　HTML的編譯分爲三個階段：

1. 首先瀏覽器會用它的標準API將HTML解析成DOM。 你須要認清這一點，由於咱們的模板必須是可被解析的HTML。這是AngularJS和那些「以字符串爲基礎而非以DOM元素爲基礎的」模板系統的區別之處。

2. DOM的編譯是由  $compile 方法來執行的。 這個方法會遍歷DOM並找到匹配的指令。一旦找到一個，它就會被加入一個指令列表中，這個列表是用來記錄全部和當前DOM相關的指令的。 一旦全部的指令都被肯定了，會按照優先級被排序，而且他們的  compile 方法會被調用。 指令的  $compile() 函數能修改DOM結構，而且要負責生成一個link函數（後面會提到）。$compile方法最後返回一個合併起來的連接函數，這時連接函數是每個指令的compile函數返回的連接函數的集合。 

3. 經過調用上一步所說的連接函數來將模板與做用域連接起來。這會輪流調用每個指令的連接函數，讓每個指令都能對DOM註冊監聽事件，和創建對做用域的的監聽。這樣最後就造成了做用域的DOM的動態綁定。任何一個做用域的改變都會在DOM上體現出來。

　　指令的模板代碼：

 1 var myModule = angular.module(...);
 2 myModule.directive('directiveName', function factory(injectables) {
 3   var directiveDefinitionObject = {
 4     priority: 0,
 5     template: '<div></div>',
 6     templateUrl: 'directive.html',
 7     replace: false,
 8     transclude: false,
 9     restrict: 'A',
10     scope: false,
11     compile: function compile(tElement, tAttrs, transclude) {
12       return {
13         pre: function preLink(scope, iElement, iAttrs, controller) { ... },
14         post: function postLink(scope, iElement, iAttrs, controller) { ... }
15       }
16     },
17     link: function postLink(scope, iElement, iAttrs) { ... }
18   };
19   return directiveDefinitionObject;
20 });

　　大部分狀況下你不須要控制這麼多細節，要簡化上面的代碼，咱們首先須要依賴基本選項的默認值。若是使用默認值的話，上面的代碼能夠簡化成：

1 var myModule = angular.module(...);
2 myModule.directive('directiveName', function factory(injectables) {
3   var directiveDefinitionObject = {
4     compile: function compile(tElement, tAttrs) {
5       return function postLink(scope, iElement, iAttrs) { ... }
6     }
7   };
8   return directiveDefinitionObject;
9 });

　　因爲大部分的指令只關心實例，並不須要將模板進行變形，因此咱們還能夠簡化成：

1 var myModule = angular.module(...);
2 myModule.directive('directiveName', function factory(injectables) {
3   return function postLink(scope, iElement, iAttrs) { ... }
4 });

　　上面代碼中的factory函數，咱們叫工廠函數，它是用來建立指令的。它只會被調用一次：就是當編譯器第一次匹配到相應指令的時候，你能夠在其中進行任何初始化的工做。調用它時使用的是  $injector.invoke ， 因此它遵循全部注入器的規則。

　　指令對象的屬性有一下：

• 名稱name - 當前做用域的名稱 
• 優先級priority - 當一個DOM上有多個指令時，就會須要指定指令執行的順序。 這個優先級就是用來在執行指令的compile函數前，先排序的。高優先級的先執行。
• terminal - 該參數用來定義是否中止當前元素上比本指令優先級低的指令，若是值爲true，就是正常狀況，按照優先級高低的順序來執行，若是設置爲false，就不會執行當前元素上比本指令優先級低的指令。
• 做用域scope- 若是被定義成：

  • true - 那麼就會爲當前指令建立一個新的做用域。若是有多個在同一個DOM上的指令要求建立新做用域，那麼只有一個新的會被建立。 這一建立新做用域的規則不適用於模板的根節點，由於模板的根節點老是會獲得一個新的做用域。

  • {}，對象哈希 - 那麼一個新的「孤立的」做用域就會被建立。這個「孤立的」做用域區別於通常做用域的地方在於，它不會以原型繼承的方式直接繼承自父做用域。這對於建立可重用的組件是很是有用的，由於可重用的組件通常不該該讀或寫父做用域的數據。 這個「孤立的」做用域使用一個對象哈希來表示，這個哈希定義了一系列本地做用域屬性，這些屬性的值能夠有如下幾種方式。
    • @ 或 @attr - 將本地做用域成員和DOM屬性綁定。使用@實現單向綁定。
    • = 或 =expression - 在本地做用域屬性和父做用域屬性間創建一個雙向的綁定。使用=實現雙向綁定。
    • & 或 &attr - 調用父scope裏的方法。

• controller - 這個是指令內部的controller，跟angular中的controller不同。它的做用是暴露此指令的一些方法給其餘指令使用。這個控制器函數是在預編譯階段被執行的，而且它是共享的，這就使得指令間能夠互相交流來擴大本身的能力。

• require - 請求將另外一個指令，假設爲direct2，中的內部controller做爲參數傳入到當前指令的連接函數link中，這樣在當前指令的link函數中，就能夠調用direct2指令中的內部controller中定義的方法了。 這個請求須要傳遞被請求指令的名字。若是沒有找到，就會觸發一個錯誤。請求的名字能夠加上下面兩個前綴：

  • • ?  - 不要觸發錯誤，這只是一個可選的請求。 
    • ^  - 沒找到的話，在父元素的做用域裏面去查找有沒有。

• restrict - EACM中的任意一個字母。它是用來限制指令的聲明格式的。若是沒有這一項。那就只容許使用屬性形式的指令。

  • E - 元素名稱：  <my-directive></my-directive>
  • A - 屬性：   <div my-directive="exp"> </div>
  • C - 類名：  <div class="my-directive: exp;"></div>
  • M - 註釋：   <!-- directive: my-directive exp -->

• 模板template - 將當前的元素替換掉。 這個替換過程會自動將元素的屬性和css類名添加到新元素上。

• 模板地址templateUrl - 和template屬性同樣，只不過這裏指示的是一個模板的URL。由於模板加載是異步的，全部編譯和連接都會等到加載完成後再執行。

• 替換replace - 若是被設置成true，那麼頁面上指令內部裏面的內容會被模板替換。好比：<hello><div>這是指令內部的內容</div></hello>，hello指令內部的div內容將會被模板替換掉。

• transclude -  若是不想讓指令內部的內容被模板替換，能夠設置這個值爲true。通常狀況下須要和ngTransclude指令一塊兒使用。 好比：template:"<div>hello every <div ng-transclude></div></div>"，這時，指令內部的內容會嵌入到ng-transclude這個div中。也就是變成了<div>hello every <div>這是指令內部的內容</div></div>

• 編譯compile - function compile(tElement, tAttrs, transclude) { ... }

  編譯函數是用來處理須要修改模板DOM的狀況的。由於大部分指令都不須要修改模板，因此這個函數也不經常使用。須要用到的例子有  ngTrepeat ，這個是須要修改模板的，還有 ngView 這個是須要異步載入內容的。編譯函數接受如下參數。 

  • tElement - template element - 指令所在的元素。對這個元素及其子元素進行變形之類的操做是安全的。

  • tAttrs - template attributes - 這個元素上全部指令聲明的屬性，這些屬性都是在編譯函數裏共享的。

  • transclude - 一個嵌入的連接函數  function(scope, cloneLinkingFn) 。 

  注意：在編譯函數裏面不要進行任何DOM變形以外的操做。 更重要的，DOM監聽事件的註冊應該在連接函數中作，而不是編譯函數中。

  編譯函數能夠返回一個對象或者函數。

  • 返回函數 - 等效於在編譯函數不存在時，使用配置對象的  link 屬性註冊的連接函數。 

  • 返回對象 - 返回一個經過  pre 或  post 屬性註冊了函數的對象。

• 連接link - function link(scope, iElement, iAttrs, controller) { ... }

  連接函數負責註冊DOM事件和更新DOM。它是在模板被克隆以後執行的，它也是大部分指令邏輯代碼編寫的地方。

  • scope - 指令須要監聽的做用域。

  • iElement - instance element - 指令所在的元素。只有在  postLink 函數中對元素的子元素進行操做纔是安全的，由於那時它們才已經所有連接好。 

  • iAttrs - instance attributes - 實例屬性，一個標準化的、全部聲明在當前元素上的屬性列表，這些屬性在全部連接函數間是共享的。

  • controller - 控制器實例，也就是當前指令經過require請求的指令direct2內部的controller。好比：direct2指令中的controller:function(){this.addStrength = function(){}}，那麼，在當前指令的link函數中，你就能夠經過controller.addStrength進行調用了。

  Pre-linking function 在子元素被連接前執行。不能用來進行DOM的變形，以防連接函數找不到正確的元素來連接。

  Post-linking function 全部元素都被連接後執行。

　　當咱們的angular應用引導啓動的時候，angular將會使用$compile服務遍歷DOM元素，在全部的指令都被識別以後，將會調用指令的compile方法，返回一個link函數，而後將這個link函數添加到稍後執行的 link 函數列表中，這個過程被稱爲編譯階段。像ng-repeat這樣的指令，須要被重複克隆不少次，compile函數只在編譯階段被執行一次，而且複製這些模板，可是link 函數會針對每一個被複制的實例被執行。因此分開處理，讓咱們在性能上有必定的提升。

參考文檔：http://www.tuicool.com/articles/fqiI73M