angular directive

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文本

angular.module("app",[]).directive("hello",function(){
                return{
                 restrict:'EA',
                 template:"<div><h3>hello world</h3></div>"
                };
            })

HTML代碼爲：<hello></hello>

結果渲染後的HTML爲：<hello>
   <div><h3>hello world</h3></div>
</hello>

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

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

{
title：‘aaaa’,
name:'leifeng'
}

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

angular.module("app",[]).directive("directitle",function(){
                return{
                 restrict:'EAC',
                 template: function(tElement,tAttrs){
                    var _html = '';
                    _html += '<div>'+tAttrs.title+'</div>';
                    return _html;
                 }
                };
            })

HTML代碼：<directitle title='biaoti'></directitle>

渲染以後的HTML：<div>biaoti</div>

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

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

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

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

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

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

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

<script type='text/ng-template' id='woshimuban.html'>
           <div>我是模板內容</div>
</script>

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

另外一種辦法緩存是:

angular.module("template.html", []).run(["$templateCache", function($templateCache) {
  $templateCache.put("template.html",
    "<div>wo shi mu ban</div>");
}]);

 

 6.replace

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

angular.module("app",[]).directive("hello",function(){
                return{
                 restrict:'EA',
                 replace：true,
                 template:"<div><h3>hello world</h3></div>"
                };
            })

HTML代碼爲：
<hello></hello>

渲染以後的代碼：<div><h3>hello world</h3></div>

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

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

7.scope

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

（1）默認值false。

表示繼承父做用域;

（2）true

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

（3）{}

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

8.transclude

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

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

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

9.controller

能夠是一個字符串或者函數。

如果爲字符串，則將字符串當作是控制器的名字，來查找註冊在應用中的控制器的構造函數

10.controllerAs

這個選項的做用是能夠設置你的控制器的別名

11.require(字符串或者數組)

字符串表明另外一個指令的名字，它將會做爲link函數的第四個參數

具體用法咱們能夠舉個例子說明

假設如今咱們要編寫兩個指令，兩個指令中的link連接函數中（link函數後面會講）存在有不少重合的方法，

這時候咱們就能夠將這些重複的方法寫在第三個指令的controller中（上面也講到controller常常用來提供指令間的複用行爲）

而後在這兩個指令中，require這個擁有controller字段的的指令（第三個指令），

最後經過link連接函數的第四個參數就能夠引用這些重合的方法了