指令（Directives）是所有AngularJS應(yīng)用最重要的部分。盡管AngularJS已經(jīng)提供了非常豐富的指令，但還是經(jīng)常需要創(chuàng)建應(yīng)用特定的指令。

說到AngularJS，我們首先想到的大概也就是雙向數(shù)據(jù)綁定和指令系統(tǒng)了，這兩者也是AngularJS中最為吸引人的地方。雙向數(shù)據(jù)綁定呢，感覺沒什么好說的，那么今天我們就來簡單的討論下AngularJS這個框架的指令系統(tǒng)，本人也是初學(xué)，查閱了一些資料，要是有一些說的不好的地方，萬望指出。

指令作為AngularJS中最為重要的部分，所以這個框架本身也是自帶了比較多的的指令，但是在開發(fā)中，這些指令通常不能滿足我們的需要，所以我們也是需要自定義一些指令的。那么一個AngularJS指令在HTML代碼中可以有四種表現(xiàn)形式：

1、作為一個新的HTML元素來使用。

<hello></hello>或者<hello/>

2、作為一個元素的屬性來使用

<div hello></div>

3、作為一個元素的類來使用

<div class="hello"></div>

4、作為注釋來使用

<!--directive: hello -->

注意這里有一個陷阱，就是在“directive: hello”這個的后面要有一個空格，不然的話是沒有效果的，同時推薦注釋的方法的還是少用，如果非要追求高大上，那就隨性吧。既然指令有以上四種表現(xiàn)形式，那么具體他是怎么來定義的呢？

.directive('hello',function(){
return {
restrict:'AECM',
template:'<button>click me</button>'
}
})

上面就是定義一個指令最簡單的代碼了，沒有之一。在上面的代碼中，directive()這個方法定義了一個新的指令，該方法有兩個參數(shù)，第一個'hello'就是規(guī)定指令的名字為hello，第二個參數(shù)是返回指令對象的函數(shù)。那么在上面的代碼中，該函數(shù)主要使用了兩個屬性來定義這個hello指令：

1、restrict[string]這個屬性，主要是用來規(guī)定指令在HTML代碼中可以使用什么表現(xiàn)形式。A代表屬性、E代表元素、C代表類、M代表注釋。實(shí)際情況中我們一般使用AE這兩種方式。

2、template[string or function]這個屬性，規(guī)定了指令被Angular編譯和鏈接（link）后生成的HTML標(biāo)記，這個屬性可以簡單到只有一個HTML文本在里面，也可以特別復(fù)雜，當(dāng)該屬性的值為function的時候，那么該方法返回的就是代表模板的字符串，同時也可以在里面使用{{}}這個表達(dá)式。

template: function () {
return '<button>click me</button>';
}

但是在一般情況下，template這個屬性都會被templateUrl取代掉，用它來指向一個外部的文件地址，所以我們通常把模板放在外部的一個HTML文件中，然后使用templateUrl來指向他。

在定義指令的時候，除了以上兩個最基礎(chǔ)的屬性外，我們還會使用到其他的很多屬性，那么下面我們就來一一的說下：

1、priority[number]屬性，這個屬性是來規(guī)定自定義的指令的優(yōu)先級的，當(dāng)一個DOM元素上面有一個以上的指令的時候，就需要去比較指令的優(yōu)先級了，優(yōu)先級高的指令先執(zhí)行。這個優(yōu)先級就是用來在執(zhí)行指令的compile函數(shù)前，先排序的，那么關(guān)于compile這個函數(shù)，我們會在下面仔細(xì)的說下。

2、terminal[boolean]屬性，該參數(shù)用來定義是否停止當(dāng)前元素上比本指令優(yōu)先級低的指令，如果值為true，就是正常情況，按照優(yōu)先級高低的順序來執(zhí)行，如果設(shè)置為false，就不會執(zhí)行當(dāng)前元素上比本指令優(yōu)先級低的指令。

3、replace[boolean]屬性，這個屬性用來規(guī)定生成的HTML內(nèi)容是否會替換掉定義此指令的HTML元素。當(dāng)我們把該屬性的值設(shè)為true的時候，打開控制臺看看你會發(fā)現(xiàn)這個指令生成的元素會是這樣的：

當(dāng)我們設(shè)置為false的時候會是這樣的：

。

4、link[function]屬性，在上面的例子中，我們自定義的指令其實(shí)沒有多大意義，這只是一個最簡單的指令，有好多的屬性我們都沒有為他定義，所以沒有多大用途。比如這個link函數(shù)，它包括三個參數(shù)：scope、element、attrs。這個link函數(shù)主要是用來添加對DOM元素的事件監(jiān)聽、監(jiān)視模型屬性變化、以及更新DOM的。它里面三個參數(shù)：

一：scope參數(shù)，在我們沒有為指令定義scope屬性的時候，那么他代表的就是父controller的scope。

二：element參數(shù)，就是指令的jQLite(jQuery的子集)包裝DOM元素。如果你在引入AngularJS之前引入了jQuery，那么這個元素就是jQuery元素，而不是jQLite元素。由于這個元素已經(jīng)被jQuery/jQLite包裝了，所以我們就在進(jìn)行DOM操作的時候就不需要再使用 $()來進(jìn)行包裝。

三：attrs參數(shù)，它包含了該指令所在元素的屬性的標(biāo)準(zhǔn)化參數(shù)對象。

5、scope[boolean or object]屬性，該屬性是用來定義指令的scope的范圍，默認(rèn)情況下是false，也就是說該指令繼承了父controller的scope，可以隨意的使用父controller的scope里的屬性，但是這樣的話就會污染到父scope里的屬性，這樣是不可取的。所以我們可以讓scope取以下兩個值：true和{}。

當(dāng)為true的時候，表示讓Angular給指令創(chuàng)建一個繼承于父scope的scope。

var myapp=angular.module('myapp',[])
.controller('myctrl',['$scope', function ($scope) {
$scope.color='red';
}])
.directive('hello', function () {
return{
restrict:'AECM',
replace:true,
template:'<button ng-click="sayhello()" style="background-color: {{color}}">click me</button>',
scope:true，
link: function (scope,elements,attrs) {
elements.bind('click', function () {
elements.css('background-color','blue');
})
}
}
})

這里我們?yōu)楦竤cope定義了一個color的屬性，并賦值為red，在hello指令的scope屬性中，我們給了true，所以angular就為這個指令創(chuàng)建了一個繼承于父scope的scope，然后在template屬性中，我們用{{}}使用了從父scope中繼承過來的color屬性，所以按鈕會是紅色的。

當(dāng)為{}的時候，表示創(chuàng)建一個隔離的scope，不會繼承父scope的屬性。但是在有的時候我們也要需要訪問父scope里的屬性或者方法，那么我們應(yīng)該怎么辦呢。angular早就為我們想到了這一點(diǎn)，有以下的三個辦法可以讓我們記性上面的操作：

一：使用@實(shí)現(xiàn)單向綁定，如果我們只給scope的這個{}值的話，那么上面代碼的按鈕的背景色將會是灰色的。，而如果我們需要使用父scope的color屬性的時候，我們可以這樣寫：

scope{
color:'@color'
}
<hello color="{{color}}"></hello>

這里有兩點(diǎn)需要注意：1、scope里的屬性color代表的是模板{{}}這個表達(dá)式里面的color，兩者必須一致。2、scope里的屬性color的值，也就是@后面的color，表示的是下面的HTML元素里的屬性color，所以這兩者也必須一致，當(dāng)這里的屬性名和模板里表達(dá)式{{}}里面使用的名稱相同的話，就可以省略掉@后面的屬性名了，然后寫成下面的形式。

scope{
color:'@'
}

從指令中scope的值可以看出，指令模板中的表達(dá)式{{}}里的color的指向的是當(dāng)前元素元素的color屬性，這個color屬性的值就是父scope的屬性color的值。父scope把他的color屬性值傳遞給了當(dāng)前元素的color屬性，然后color屬性又把值傳遞給了模板中表達(dá)式里的color，這個過程是單向的。

二：使用=實(shí)現(xiàn)雙向綁定

.directive('hello', function () {
return{
restrict:'AECM',
replace:true,
template:'<button style="background-color: {{color}}">click me</button>',
scope:{
color:'='
},
link: function (scope,elements,attrs) {
elements.bind('click', function () {
elements.css('background-color','blue');
scope.$apply(function () {
scope.color='pink';
})
})
}
}
})
<hello color="color"></hello>
<input type="text" ng-model="color"/>

這里我們給指令的scope中的color屬性和父scope中的color屬性進(jìn)行了雙向綁定，并且給指令的link函數(shù)里，添加了一個單擊事件，點(diǎn)擊按鈕會讓按鈕的顏色發(fā)生變化，并且改變指令scope的color屬性的值，再給HTML頁面中加了一個input標(biāo)簽，輸出或者輸入父scope的color屬性的值。這里有一個地方需要注意：當(dāng)前元素的屬性名的值不用再加上{{}}這個表達(dá)式了，因?yàn)檫@里父scope傳遞的是一個真實(shí)的scope數(shù)據(jù)模型，而不是簡單的字符串，所以這樣我們就可以傳遞簡單的字符串、數(shù)組、甚至復(fù)雜的對象給指令的scope?，F(xiàn)在讓我們來看看點(diǎn)擊這個按鈕將會發(fā)生什么。

這里我們能看到，按鈕的顏色變成了粉色的，說明點(diǎn)擊讓指令的scope的color屬性發(fā)生了變化，從而導(dǎo)致按鈕的顏色發(fā)生了變化。但是這里不僅僅是按鈕發(fā)生了變化，注意看，input表單里的值也變成了pink，這就說明父scope的color屬性也發(fā)生了變化。 另外，再讓我們來給input里面輸入一個顏色，看看發(fā)生什么變化。

，

可以看出當(dāng)我們在表單里輸入另外一種顏色的時候，按鈕的顏色也發(fā)生了變化，這就說明指令的scope的color屬性被改變了。綜上我們可以發(fā)現(xiàn)使用'='實(shí)現(xiàn)的是雙向綁定。

三：使用&調(diào)用父scope里的方法

var myapp=angular.module('myapp',[])
.controller('myctrl',['$scope', function ($scope) {
$scope.color='red';
$scope.sayhello= function () {
alert('hello');
};
}])
.directive('hello', function () {
return{
restrict:'AECM',
replace:true,
template:'<button ng-click="sayhello()" style="background-color: {{color}}">click me</button>',
scope:{
color:'=',
sayhello:'&'
},
link: function (scope,elements,attrs) {
elements.bind('click', function () {
elements.css('background-color','blue');
scope.$apply(function () {
scope.color='pink';
})
})
}
}
})
<hello color="color" sayhello="sayhello()"></hello>
<input type="text" ng-model="color"/>

這里我們也有兩個地方需要注意：1、我們不僅需要在模板中使用ng-click指令，綁定上要調(diào)用的父scope中的方法，而且要在給當(dāng)前元素添加一個屬性，并且這個屬性指向要調(diào)用的父scope的方法。2、指令scope的屬性sayhello、當(dāng)前元素的屬性sayhello、模板綁定的事件方法名sayhello這三者要一致。那么這樣我們就可以點(diǎn)擊按鈕，彈出一個對話框了。

6、transclude[boolean]屬性，這個屬性用來讓我們規(guī)定指令是否可以包含任意內(nèi)容

.directive('hello', function () {
return{
restrict:'AECM',
replace:true,
transclude:true,
scope:{},
template:'<div ng-transclude></div>',
}
})
<hello>
hello
<span>{{color}}</span>
</hello>

當(dāng)他的值為true的時候，這是頁面上輸出的值。當(dāng)為false的時候，頁面上將會是空白的。這里有一個地方需要注意，就是<span>{{color}}</span>，這里的color是父scope里的color。并不是指令里的scope的color屬性。

7、compile[function]參數(shù)，該方法有兩個參數(shù)element，attrs，第一個參數(shù)element指指令所在的元素，第二個attrs指元素上賦予的參數(shù)的標(biāo)準(zhǔn)化列表。這里我們也有個地方需要注意：compile 函數(shù)不能訪問 scope，并且必須返回一個 link 函數(shù)。但是如果沒有設(shè)置 compile 函數(shù)，你可以正常地配置 link 函數(shù)，（有了compile，就不能用link，link函數(shù)由compile返回）。

.directive('hello', function () {
return{
restrict:'AECM',
replace:true,
translude:true,
template:'<button ng-click="sayhello()" style="background-color: {{color}}">click me</button>',
scope:{
color:'=',
sayhello:'&'
},
compile: function (element,attrs) {
return function (scope,elements,attrs) {
elements.bind('click', function () {
elements.css('background-color','blue');
scope.$apply(function () {
scope.color='pink';
})
})
};
}
}
})

現(xiàn)在讓我們來點(diǎn)擊這個按鈕

我們發(fā)現(xiàn)，這里點(diǎn)擊按鈕之后發(fā)生的事情和前面用link屬性的一樣，這其實(shí)是沒有多少差別的。

其實(shí)在大多數(shù)的情況下，我們只需要使用 link 函數(shù)。這是因?yàn)榇蟛糠值闹噶钪恍枰紤]注冊事件監(jiān)聽、監(jiān)視模型、以及更新DOM等，這些都可以在 link 函數(shù)中完成。 但是對于像 ng-repeat 之類的指令，需要克隆和重復(fù) DOM 元素多次，在 link 函數(shù)執(zhí)行之前由 compile 函數(shù)來完成。那么為什么我們需要兩個分開的函數(shù)來完成生成過程，為什么不能只使用一個？要回答好這個問題，我們需要理解指令在Angular中是如何被編譯的！

8、指令是如何被編譯的

當(dāng)我們的angular應(yīng)用引導(dǎo)啟動的時候，angular將會使用$compile服務(wù)遍歷DOM元素，在所有的指令都被識別之后，將會調(diào)用指令的compile方法，返回一個link函數(shù)，然后將這個link函數(shù)添加到稍后執(zhí)行的 link 函數(shù)列表中，這個過程被稱為編譯階段。像ng-repeat這樣的指令，需要被重復(fù)克隆很多次，compile函數(shù)只在編譯階段被執(zhí)行一次，并且復(fù)制這些模板，但是link 函數(shù)會針對每個被復(fù)制的實(shí)例被執(zhí)行。所以分開處理，讓我們在性能上有一定的提高（這句話有點(diǎn)不太理解，我是從別的地方copy過來的。原文在這里http://blog.jobbole.com/62249/）。

9、controller[string or function]和require[string or string[]]參數(shù),當(dāng)我們想要允許其他的指令和你的指令發(fā)生交互時，我們就需要使用 controller 函數(shù)。當(dāng)另一個指令想要交互時，它需要聲明它對你的指令 controller 實(shí)例的引用(require)。

.directive('hello', function () {
return{
scope:{},
require:'^he',
compile: function (element,attrs) {
return function (scope,elements,attrs,cntIns) {
cntIns.fn()
};
}
}
})
.directive('he', function () {
return {
restrict:'AE',
scope:{},
controller: function ($scope, $compile, $http) {
this.fn= function () {
alert('hello');
};
}
}
})
<he>
<hello color="color" sayhello="sayhello()"></hello>
</he>

當(dāng)頁面加載完畢之后，會彈出一個對話框。

好了上面就是我這段時間學(xué)習(xí)angular，所了解到的指令的知識，就先寫到這里了。

最新評論