Angular JS學習筆記（指令）

Angular JS 指令的學習

指令
指令就是附加到html元素的一些自定義標記
編譯器
編譯器是Angular提供的一項服務，遍歷DOM節點，查找特定的屬性。
編譯過程分爲兩步：
1.編譯：遍歷節點，收集所有指令，返回一個連接函數。link func
2.連接：將每個節點和其所在的作用域連接，雙向綁定

指令
指令其實就是編譯器遍歷DOM節點時碰到的執行函數

我們現在創建一個dialog指令並使用它

首先我們寫出指令模板

<div ng-show="visible">
  <h3></h3>
  <div class="body" ng-transclude></div>
  <div class="footer">
    <button ng-click="onOk()">Save changes</button>
    <button ng-click="onCancel()">Close</button>
  </div>
</div>

ng-transclude 代表主體，指令中包裹的代碼段會放到指令模版中transclude中
在頁面使用它：

<div>
  <button ng-click="show=true">show</button>
 
  <dialog title="Hello ."
          visible="show"
          on-cancel="show = false"
          on-ok="show = false; doSomething()">
     Body goes here:  is .
  </dialog>
</div>

那麼我們怎樣在指令模板中使用這些外部數據呢？
需要建立映射，映射的雙方是本地scope和指令中的屬性。

transclude: true,
scope: {
    title: '@',             // the title uses the data-binding from the parent scope
    onOk: '&',              // create a delegate onOk function
    onCancel: '&',          // create a delegate onCancel function
    visible: '='            // set up visible to accept data-binding
},
restrict: 'E',
replace: true

priority 數字，代表優先級，同一元素中指令執行的優先級

restrict可以設置成以下方式：

‘A’ - 僅匹配屬性名
‘E’ - 僅匹配元素名
‘AE’ - 既匹配屬性名又匹配元素名

scope 參數的作用是：隔離指令與所在控制器(父級作用域的控制器)間的作用域，隔離指令與指令之間的作用域。
scope的值是可選的，可選值分別爲：false，true，object，默認情況下爲false；
·false 共享父作用域
·true 繼承父作用域，並且新建獨立作用域
·{ } 不繼承父作用域，創建新的獨立作用域

當指令設置新的獨立作用域時，我們還想設置一些屬性以便於指令中可以使用
有三種方式提供給我們：

1. @ 局部scope屬性，父scope中數據變化會同步到指令中，而指令中變化不會改變父作用域中的數據
2. = 父子作用域屬性雙向綁定
3. & 可以是表達式，或者一個函數，controller中的函數可以在指令模版中設置調用方式

terminal ：bool類型，如果設置爲true，優先級低於該指令就不會執行

template 可以設置爲兩種形式
1.html代碼
2.函數 兩個參數
template: function(tElement,tAttrs){
var _html = ‘’;
_html += ‘

’ +‘hello ‘+tAttrs.title+’

’;
return _html;
}
我們可以在指令調用時像使用屬性一樣設置title
replace
爲true的時候會替換指令，最後渲染的html沒有指令元素