上一篇我們說到了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選項例子已有例子)