摘要：使用開(kāi)發(fā)，很重要的一步是需要開(kāi)發(fā)自定義的指令。接下來(lái)分幾個(gè)步驟記錄如何開(kāi)發(fā)一個(gè)自定義的指令。對(duì)這個(gè)元素及其子元素進(jìn)行變形之類的操作是安全的。鏈接函數(shù)鏈接函數(shù)負(fù)責(zé)注冊(cè)事件和更新。說(shuō)明和是指令的關(guān)鍵部分，留在下一章中詳細(xì)討論。

使用Angularjs開(kāi)發(fā)，很重要的一步是需要開(kāi)發(fā)自定義的指令（custom directives）。
接下來(lái)分幾個(gè)步驟記錄如何開(kāi)發(fā)一個(gè)自定義的指令。

指令是什么？

寫(xiě)一個(gè)基本的指令

指令的屬性說(shuō)明

Angularjs中的指令，我個(gè)人的簡(jiǎn)單的理解：指令=控件
指令實(shí)際是對(duì)Html元素的擴(kuò)展，傳統(tǒng)的服務(wù)端控件，例如asp.net中的服務(wù)器端控件（處理在服務(wù)端,最終編譯成html返回給客戶端），其實(shí)也是對(duì)Html元素的擴(kuò)展。angularjs中的指令，最終其實(shí)也是經(jīng)過(guò)angularjs(其實(shí)就是javascript）的編譯處理，最終輸出成html。具體的細(xì)節(jié)不繼續(xù)細(xì)說(shuō)，如果對(duì)angularjs毫無(wú)認(rèn)識(shí)的童鞋，建議了解一些基本概念以后再看。

var simpleapp=angular.module("simpleapp");
simpleapp.directive("simpleDirective", function () {
    var directiveObj = {
        template:"
這是一個(gè)自定義指令
"
    }
    return directiveObj;
});

以上就是一個(gè)簡(jiǎn)單的自定義指令，最終頁(yè)面會(huì)輸出指令里包含的內(nèi)容。這里先不說(shuō)屬性，只先討論應(yīng)該在何處定義，下一節(jié)再說(shuō)如何定義指令內(nèi)部。

看上面示例，可以知道指令必須是在module下的，先得獲取到模塊對(duì)象simpleapp，然后使用directive函數(shù)來(lái)定義一個(gè)指令。

在上節(jié)例子中可以看到，simpleapp.directive第二個(gè)參數(shù)最終執(zhí)行后需要返回一個(gè)對(duì)象（我叫它指令對(duì)象），這個(gè)指令對(duì)象里面有可以包含很多屬性，大概有12個(gè)，這節(jié)主要解釋這些屬性的用法。
我主要是按功能來(lái)給這些屬性分類并講解。

template和templateUrl都是用來(lái)指定指令模板的，模板是用來(lái)編譯內(nèi)容的一個(gè)基本模型。

字符串或函數(shù)，可以指定為一個(gè)html字符串，也可以是一個(gè)特定的函數(shù)。
例子：

template: "
"
//or
template:function(tElement, tAttrs) { return "..." },

當(dāng)為一個(gè)函數(shù)時(shí)，函數(shù)應(yīng)該返回一個(gè)字符串。函數(shù)的tElement, tAttrs分別代表一個(gè)元素和元素對(duì)應(yīng)的屬性集合。

字符串或函數(shù)，可以指定一個(gè)模板的地址，也可以是一個(gè)特定的函數(shù)。

templateUrl: "sometemplate.html"
//or
templateUrl:function(tElement, tAttrs) { return tAttrs.xx+"xx.html" },

當(dāng)為一個(gè)函數(shù)時(shí)，函數(shù)應(yīng)該返回一個(gè)字符串。函數(shù)的tElement, tAttrs分別代表一個(gè)元素和元素對(duì)應(yīng)的屬性集合。

字符串，這個(gè)屬性用來(lái)限制指令匹配模式，可以有四種模式，分別是A（Attribute）、E(Element)、C(Class)、M（注釋）,這四種模式可以自由組合。

需要注意的是，如果不設(shè)置此屬性，則默認(rèn)匹配EA兩種模式。

疑問(wèn)：M的匹配方式是靠C控制的，即如果設(shè)置restrict:"C"，實(shí)際匹配的是C和M，如果多帶帶設(shè)置restrict:"M"則無(wú)法生效。--這個(gè)問(wèn)題不知道是為什么？

主要是標(biāo)記文檔類型，可設(shè)置為html、svg、math。具體使用場(chǎng)景我也未曾使用過(guò)。
此處貼上官方說(shuō)明:

 * String representing the document type used by the markup in the template.
 * AngularJS needs this information as those elements need to be created and cloned
 * in a special way when they are defined outside their usual containers like `

優(yōu)先級(jí)，當(dāng)一個(gè)DOM上有多個(gè)指令時(shí)，有會(huì)需要指定指令執(zhí)行的順序。 這個(gè)優(yōu)先級(jí)就是用來(lái)在執(zhí)行指令的compile函數(shù)前先排序的。高優(yōu)先級(jí)的先執(zhí)行。 相同優(yōu)先級(jí)的指令順序沒(méi)有被指定誰(shuí)先執(zhí)行

個(gè)人認(rèn)為這個(gè)屬性還是比較難解釋的，本身英文也不知怎么解釋。我按個(gè)人理解叫做”局部替換“，這個(gè)屬性通常是要和ng-transclude配合。
先說(shuō)下官方的意思：

 * Extract the contents of the element where the directive appears and make it available to the directive.
 * The contents are compiled and provided to the directive as a **transclusion function**. See the
 * {@link $compile#transclusion Transclusion} section below.
 *
 * There are two kinds of transclusion depending upon whether you want to transclude just the contents of the
 * directive"s element or the entire element:
 *
 * * `true` - transclude the content (i.e. the child nodes) of the directive"s element.
 * * `"element"` - transclude the whole of the directive"s element including any directives on this
 *   element that defined at a lower priority than this directive. When used, the `template`
 *   property is ignored.

個(gè)人理解是transclude開(kāi)啟時(shí)，在編譯完成以后，會(huì)將編譯后的內(nèi)容放到ng-transclude指定的位置中，類似于占位符的作用。
我還是寫(xiě)一個(gè)例子，這樣能夠更直觀的看出它是什么意思

//JS
simpleapp.directive("simpleTransclude", function () {
    return {
        template: "
這是模板原有的內(nèi)容
",
        transclude: true
    };
})

//HTML
這是指令內(nèi)容

//瀏覽器最終展現(xiàn)效果

    

        
這是模板原有的內(nèi)容
        

            這是指令內(nèi)容
        
    

作用域，如果聲明了，則指令會(huì)產(chǎn)生一個(gè)私有的作用域,如果有多個(gè)，則只有一個(gè)新的會(huì)被創(chuàng)建，也就是最后一個(gè)。對(duì)更節(jié)點(diǎn)無(wú)效。而且這個(gè)作用域是孤立的，不會(huì)以原型繼承的方式直接繼承自父作用域。這是需要注意的地方。關(guān)于scope的內(nèi)容需要將的太多，放在以后的文章中詳細(xì)說(shuō)（難道說(shuō)其實(shí)我自己也搞不清？)。

控制器的構(gòu)造對(duì)象。這個(gè)控制器函數(shù)是在預(yù)編譯階段被執(zhí)行的，并且它是共享的，其他指令可以通過(guò)它的名字得到（參考依賴屬性[require attribute]）。
注意它是在預(yù)編譯的時(shí)候執(zhí)行，這一點(diǎn)非常重要，這意味著你可以在預(yù)編譯前，在這個(gè)controller中做一些你想做的事情。

AngularJS 1.2版本中提供了Controller As語(yǔ)法，簡(jiǎn)單說(shuō)就是可以在Controller中使用this來(lái)替代$scope。其他與controller是一樣的。

請(qǐng)求將另一個(gè)控制器作為參數(shù)傳入到當(dāng)前鏈接函數(shù)。 這個(gè)請(qǐng)求需要傳遞被請(qǐng)求指令的控制器的名字。如果沒(méi)有找到，就會(huì)觸發(fā)一個(gè)錯(cuò)誤。請(qǐng)求的名字可以加上下面兩個(gè)前綴：

? - 不要觸發(fā)錯(cuò)誤，這只是一個(gè)可選的請(qǐng)求。
^ - 沒(méi)找到的話，在父元素的controller里面也查找有沒(méi)有。

編譯函數(shù)，在時(shí)執(zhí)行，且指執(zhí)行一次。

function compile(tElement, tAttrs, transclude) { ... }

編譯函數(shù)是用來(lái)處理需要修改模板DOM的情況的。因?yàn)榇蟛糠种噶疃疾恍枰薷哪０?，所以這個(gè)函數(shù)也不常用。需要用到的例子有ngTrepeat，這個(gè)是需要修改模板的，還有ngView這個(gè)是需要異步載入內(nèi)容的。編譯函數(shù)接受以下參數(shù)。

tElement - template element - 指令所在的元素。對(duì)這個(gè)元素及其子元素進(jìn)行變形之類的操作是安全的。

tAttrs - template attributes - 這個(gè)元素上所有指令聲明的屬性，這些屬性都是在編譯函數(shù)里共享的， 參考章節(jié)“屬性”。

transclude - 一個(gè)嵌入的鏈接函數(shù)function(scope, cloneLinkingFn)。

注意：如果模板被克隆了，那么模版實(shí)例和鏈接實(shí)例可能不是同一個(gè)對(duì)象。 所以在編譯函數(shù)不要進(jìn)行任何DOM變形之外的操作。 更重要的，DOM監(jiān)聽(tīng)事件的注冊(cè)應(yīng)該在鏈接函數(shù)中做，而不是編譯函數(shù)中。

編譯函數(shù)可以返回一個(gè)對(duì)象或者函數(shù)。

返回函數(shù) - 等效于在編譯函數(shù)不存在時(shí)，使用配置對(duì)象的link屬性注冊(cè)的鏈接函數(shù)。

返回對(duì)象 - 返回一個(gè)通過(guò)pre或post屬性注冊(cè)了函數(shù)的對(duì)象- 使你能更具體的鏈接函數(shù)的執(zhí)行點(diǎn)。參考下面pre-linking和post-liking函數(shù)的解釋。

鏈接函數(shù)

function link(scope, iElement, iAttrs, controller) { ... }

鏈接函數(shù)負(fù)責(zé)注冊(cè)DOM事件和更新DOM。它是在模板被克隆之后執(zhí)行的。 它也是大部分指令邏輯代碼編寫(xiě)的地方。

scope - 指令需要監(jiān)聽(tīng)的作用域。

iElement - instance element - 指令所在的元素。只有在postLink函數(shù)中對(duì)元素的子元素進(jìn)行操作才是安全的，因?yàn)槟菚r(shí)它們才已經(jīng)全部連接好。

iAttrs - instance attributes - 實(shí)例屬性，一個(gè)標(biāo)準(zhǔn)化的、所有聲明在當(dāng)前元素上的屬性列表，這些屬性在所有鏈接函數(shù)間是共享的。參考“屬性”。

controller - 控制器實(shí)例，如果至少有一個(gè)指令定義了控制器，那么這個(gè)控制器就會(huì)被傳遞?？刂破饕彩侵噶铋g共享的，指令可以用它來(lái)相互通信。

Pre-linking function 在子元素被鏈接前執(zhí)行。不能用來(lái)進(jìn)行DOM的變形，以為可能導(dǎo)致鏈接函數(shù)找不到正確的元素來(lái)鏈接。

Post-linking function 所有元素都被鏈接后執(zhí)行?？梢圆僮鱀OM的變形。

link和compile是指令的關(guān)鍵部分，留在下一章中詳細(xì)討論。