angularjs 指令（directive）詳解(2)

原文地址

上一篇咱們說到了transclude，那麼，咱們如今繼續講解以後的內容。

9.scope

可選參數，默認值爲false。取值：

false - 在這個directive裏不會建立新的scope，而是繼承父級的scope。

true - 爲這個directive建立一個新的scope，並繼承它的父級的scope。

{} - 對象，在這個directive中建立一個新的帶隔離的scope，這能夠防止讀取或者修改父級scope的數據，建立可重用的組件全靠這個了。

     對象裏的值是如何與父級的scope綁定呢？經過如下屬性：

   (1).@或@attr - 若是沒有指定attr名稱(即只寫@)，attr與directive中定義的名稱同樣。只能是string類型，並單向綁定到父級的scope，即繼承與父級scope，可是改變directive中相應scope的值的時候，父級scope不會發生變化。

   (2).=或=attr - 若是沒有指定attr名稱(即只寫=)，attr與directive中定義的名稱同樣。 跟父級的scope雙向綁定，即改變其中一個的值，另外一個也會跟着變化。

   (3).&或&attr - 若是沒有指定attr名稱(即只寫&)，attr與directive中定義的名稱同樣。 當咱們想在directive中的子級scope中調用父級的函數時，該怎麼辦呢？‘&’就是用來解決這個問題的。它提供了一種在父級範圍中執行一個function的途徑，並能夠經過localFn（{args1:'',args2:''}）來使父級函數獲取相應的數據。

 

10.controller

可選參數。controller會在pre-linking步驟以前進行初始化，而且能夠經過其餘的directive訪問（詳情請看require相關說明）。controller是能夠被注入的，而且默認注入瞭如下的行爲：

$scope -當前directive元素的scope

 $element -當前directive的元素

 $attrs - 當前元素的屬性組成的對象

 $transclude - 在controller裏實現transclude ，下面是參數解釋

  function([scope], cloneLinkingFn, futureParentElement, slotName):

 （1）.scope: （可選參數）當前directive元素的scope

 （2）.cloneLinkingFn: （可選參數） 克隆當前引用的內容

 （3）.futureParentElement:（可選參數）

 （4）.slotName: （可選參數）transclude的名稱。

 

11.require

可選參數。請求其餘的directive的controller，傳入當前directive的linking function中。require須要傳入一個directive controller的名稱。若是找不到這個名稱對應的controller，那麼將會拋出一個error。名稱能夠加入如下前綴：

（無前綴） - 找到當前元素上所需的控制器。
? -嘗試找到所須要的控制器。
^ -經過搜索元素及其父級找到所需的控制器。若是沒有找到引起錯誤。
^^ -經過搜索元素的父級找到所需的控制器。若是沒有找到引起錯誤。
?^ -嘗試經過搜索元素及其父級找到所須要的控制器。
?^^ -嘗試經過搜索元素的父級找到所須要的控制器。

12.controllerAs

可選參數。設置你的控制器的別名

 

 

13.compile

compile編譯函數選項

compile選項能夠返回一個對象或者函數

在這裏咱們能夠在指令和實時數據被放到DOM中以前進行DOM操做，

好比咱們能夠在這裏進行添加或者刪除節點的DOM的操做。

因此編譯函數是負責對模板的DOM進行轉換，而且僅僅只會運行一次。

//compile函數的語法
compile:function compile(tElement,tAttrs,transclude){
      return{
        pre:function preLink(scope,iElement,iAttrs,controller){},
        post:function postLink(scope,iElement,iAttrs,controller){}
      }
    }

對於咱們編寫的大部分的指令來講，並不須要對模板進行轉換，因此大部分狀況只要編寫link函數就能夠了。

tips：preLink函數會在編譯階段以後，指令連接到子元素以前執行

        相似的，postLink會在指令連接到子元素以後執行

        這意味着，爲了避免破壞綁定過程，若是你須要修改DOM結構，你應該在postLink函數中來作這件事。

 

14.link連接函數選項

連接函數負責將做用域和DOM進行連接。

//link連接函數
link:function postLink(scope,iElement,iAttrs){}

若指令中定義有require選項，則link函數會有第四個參數，表明控制器或者所依賴的指令的控制器（上面require選項例子已有例子）