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選項例子已有例子)


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章