angularJS directive詳解（自定義指令）

Angularjs指令定義的API

 AngularJs的指令定義大體以下

其中return返回的對象包含不少參數，下面一一說明

1.restrict

（字符串）可選參數，指明指令在DOM裏面以什麼形式被聲明；

取值有：E(元素),A(屬性),C(類),M(註釋)，其中默認值爲A；

E(元素)：<directiveName></directiveName>
A(屬性)：<div directiveName='expression'></div>
C(類)：   <div class='directiveName'></div>
M(註釋)：<--directive:directiveName expression-->

例如restrict：‘EA’ 則表示指令在DOM裏面可用元素形式和屬性形式被聲明；

通常來講，當你建立一個有本身模板的組件的時候，須要使用元素名，若是僅僅是爲爲已有元素添加功能的話，就使用屬性名

注意：若是想支持IE8，則最好使用屬性和類形式來定義。 另外Angular從1.3.x開始, 已經放棄支持IE8了.

2.priority

(數字)，可選參數，指明指令的優先級，若在單個DOM上有多個指令，則優先級高的先執行；

設置指令的優先級算是不經常使用的

比較特殊的的例子是，angularjs內置指令的ng-repeat的優先級爲1000，ng-init的優先級爲450；

3.terminal

（布爾型），可選參數，能夠被設置爲true或false，若設置爲true，則優先級低於此指令的其餘指令則無效，不會被調用(優先級相同的仍是會執行)

4.template（字符串或者函數）可選參數，能夠是：

（1）一段HTML文本

（2）一個函數，可接受兩個參數tElement和tAttrs

其中tElement是指使用此指令的元素，而tAttrs則實例的屬性，它是一個由元素上全部的屬性組成的集合（對象）形如：

下面讓咱們看看template是一個函數時候的狀況

由於一段HTML文本，閱讀跟維護起來都是很麻煩的，所用一般會使用templateUrl這個。

5.templateUrl（字符串或者函數），可選參數，能夠是

（1）一個表明HTML文件路徑的字符串

（2）一個函數，可接受兩個參數tElement和tAttrs（大體同上）

注意：在本地開發時候，須要運行一個服務器，否則使用templateUrl會報錯 Cross Origin Request Script（CORS）錯誤

因爲加載html模板是經過異步加載的，若加載大量的模板會拖慢網站的速度，這裏有個技巧，就是先緩存模板

你能夠再你的index頁面加載好的，將下列代碼做爲你頁面的一部分包含在裏面。

這裏的id屬性就是被設置在templateUrl上用的。

另外一種辦法緩存是:

6.replace

（布爾值），默認值爲false，設置爲true時候，咱們再來看看下面的例子（對比下在template時候舉的例子）

對比下沒有開啓replace時候的渲染出來的HTML。發現<hello></hello>不見了。

另外當模板爲純文本（即template:"wo shi wen ben"）的時候，渲染以後的html代碼默認的爲文本用span包含。

7.scope

可選參數，（布爾值或者對象）默認值爲false，可能取值：

（1）默認值false。

表示繼承父做用域;

（2）true

表示繼承父做用域，並建立本身的做用域（子做用域）;

（3）{}

表示建立一個全新的隔離做用域；

7.1首先咱們先來了解下scope的繼承機制。咱們用ng-controller這個指令舉例，

咱們都知道ng-controller（內置指令）能夠從父做用域中繼承而且建立一個新的子做用域。以下：

這時頁面顯示是

parentNode：父親

chrildNode： 兒子

若去掉

則顯示

parentNode：父親

chrildNode： 父親

注意：

1）若一個元素上有多個指令，使用了隔離做用域，則只有其中一個能夠生效；

2）只有指令模板中的根元素才能得到一個新的做用域，這時候，scope就被設置爲true了；

 

 

頁面顯示爲：

parentNode：父親

chrildNode： cunjieliu

孫女

上面中class爲one那個div得到了指令ng-controller=’myController‘所建立的新的做用域；

而class爲two那個div得到了指令ng-controller=’myController2‘所建立的新的做用域；

這就是「只有指令模板中的根元素才能得到一個新的做用域」；

 

接下來咱們經過一個簡單明瞭的例子來講明scope取值不一樣的差異

依次設置scope的值false，true，{}，結果發現（你們別偷懶，動手試試哈）

當爲false時候，兒子繼承父親的值，改變父親的值，兒子的值也隨之變化，反之亦如此。（繼承不隔離）

當爲true時候，兒子繼承父親的值，改變父親的值，兒子的值隨之變化，可是改變兒子的值，父親的值不變。（繼承隔離）

當爲{}時候，沒有繼承父親的值，因此兒子的值爲空，改變任何一方的值均不能影響另外一方的值。（不繼承隔離）

tip：當你想要建立一個可重用的組件時隔離做用域是一個很好的選擇，經過隔離做用域咱們確保指令是‘獨立’的,並能夠輕鬆地插入到任何HTML app中，而且這種作法防止了父做用域被污染；

7.2隔離做用域能夠經過綁定策略來訪問父做用域的屬性。

下面看一個例子

可是，但咱們將scope設置爲{}時候，再次運行上面的代碼能夠發現頁面並不能成功完整顯示！

緣由在於，這裏咱們將scope設置爲{}，產生了隔離做用域。

因此在template模板中{{color}}變成了依賴於本身的做用域，而不是依賴於父做用域。

所以咱們須要一些辦法來讓隔離做用域能讀取父做用域的屬性，就是綁定策略。

下面咱們就來探索設置這種綁定的幾種方法

方法一：使用@（@attr）來進行單向文本（字符串）綁定

這種辦法只能單向，經過在運行的指令的那個html標籤上設置color-attr屬性，而且採用{{}}綁定某個模型值。

注意，你也能夠再這裏直接綁定字符串的顏色值,如：color-attr=「red」；

而後你能夠看到表達式{{color}}被賦值給了color-attr。

當表達式的值發生變化時，屬性color-attr也會發生變化，因此也改變了隔離做用域中的屬性color。

tips：若是綁定的隔離做用域屬性名與元素的屬性名相同，則能夠採起缺省寫法

這裏須要注意的是，咱們要直接在指令運行的那個元素上設置屬性時候，是直接將 實際的做用域模型 賦值給該屬性（這裏就是color）

這樣一個雙向綁定被創建了，改變任何一個input都會改變另外一個值。

方法三：使用&來調用父做用域中的函數

運行以後，彈出alert框。

8.transclude

（布爾值或者字符‘element’），默認值爲false；

這個配置選項可讓咱們提取包含在指令那個元素裏面的內容，再將它放置在指令模板的特定位置。

當你開啓transclude後，你就可使用ng-transclude來指明瞭應該在什麼地方放置transcluded內容

運行上面的代碼，輸出

china

leifeng

另外當開啓transclude，會建立一個新的transclude空間，而且繼承了父做用域（即便Scope設置爲隔離做用域），

上面代碼中的{{name}}是依賴於父做用域的，仍然能被渲染出來，就說明了這點。

咱們再看看生成的html爲下圖所示，能夠發現文本「你看不見我」消失了，這是由於被transclude內容替換掉了。

這裏的transclude內容就是{{name}}

接下來再來看看transclude的另外一個取值transclude：「element」

那transclude：「element」與transclude：true有什麼區別呢？

區別在於嵌入的內容，以上面的例子來講，

當transclude：true時候，嵌入的內容爲{{name}}，

而當transclude：「element」時候，嵌入的內容爲

注：本文系轉載，我的感受寫的比較詳細，拿來分享。