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

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

指令是什么？

寫一個基本的指令

指令的屬性說明

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

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

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

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

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

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

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

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

當為一個函數(shù)時，函數(shù)應該返回一個字符串。函數(shù)的tElement, tAttrs分別代表一個元素和元素對應的屬性集合。

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

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

當為一個函數(shù)時，函數(shù)應該返回一個字符串。函數(shù)的tElement, tAttrs分別代表一個元素和元素對應的屬性集合。

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

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

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

主要是標記文檔類型，可設置為html、svg、math。具體使用場景我也未曾使用過。
此處貼上官方說明:

 * 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)先級，當一個DOM上有多個指令時，有會需要指定指令執(zhí)行的順序。 這個優(yōu)先級就是用來在執(zhí)行指令的compile函數(shù)前先排序的。高優(yōu)先級的先執(zhí)行。 相同優(yōu)先級的指令順序沒有被指定誰先執(zhí)行

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

 * 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.

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

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

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

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

    

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

            這是指令內(nèi)容
        
    

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

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

AngularJS 1.2版本中提供了Controller As語法，簡單說就是可以在Controller中使用this來替代$scope。其他與controller是一樣的。

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

? - 不要觸發(fā)錯誤，這只是一個可選的請求。
^ - 沒找到的話，在父元素的controller里面也查找有沒有。

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

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

編譯函數(shù)是用來處理需要修改模板DOM的情況的。因為大部分指令都不需要修改模板，所以這個函數(shù)也不常用。需要用到的例子有ngTrepeat，這個是需要修改模板的，還有ngView這個是需要異步載入內(nèi)容的。編譯函數(shù)接受以下參數(shù)。

tElement - template element - 指令所在的元素。對這個元素及其子元素進行變形之類的操作是安全的。

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

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

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

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

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

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

鏈接函數(shù)

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

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

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

iElement - instance element - 指令所在的元素。只有在postLink函數(shù)中對元素的子元素進行操作才是安全的，因為那時它們才已經(jīng)全部連接好。

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

controller - 控制器實例，如果至少有一個指令定義了控制器，那么這個控制器就會被傳遞。控制器也是指令間共享的，指令可以用它來相互通信。

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

Post-linking function 所有元素都被鏈接后執(zhí)行。可以操作DOM的變形。

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