摘要：發(fā)生改變時(shí)，會(huì)得到對(duì)應(yīng)的響應(yīng)。工廠方法通過執(zhí)行，讓它遵守所有注入聲明規(guī)則，讓其變?yōu)榭勺⑷氲摹＿@屬性用于在的調(diào)用之前進(jìn)行排序。這將允許之間相互溝通，增強(qiáng)相互之間的行為。

英文地址：directive

　　Directive是教HTML玩一些新把戲的途徑。在DOM編譯期間，directives匹配HTML并執(zhí)行。這允許directive注冊(cè)行為或者轉(zhuǎn)換DOM結(jié)構(gòu)。
　　Angular自帶一組內(nèi)置的directive，對(duì)于建立Web App有很大幫助。繼續(xù)擴(kuò)展的話，可以在HTML定義領(lǐng)域特定語(yǔ)言（domain specific language ,DSL)。

　　Directive有駝峰式（camel cased）的風(fēng)格的命名，如ngBind（放在屬性里貌似用不了~）。但directive也可以支蛇底式的命名（snake case），需要通過:（冒號(hào)）、-（減號(hào)）或_（下劃線）連接。作為一個(gè)可選項(xiàng)，directive可以用“x-”或者“data-”作為前綴，以滿足HTML驗(yàn)證需要。這里列出directive的合法命名：

ng:bind

ng-bind

ng_bind

x-ng-bind

data-ng-bind

Directive可以放置于元素名、屬性、class、注釋中。下面是引用myDir這個(gè)directive的等價(jià)方式。（但很多directive都限制為“屬性”的使用方式）

Directive可以通過多種方式引用，下面列出N種等價(jià)的方式：

    
    
    



    Hello 

    ngBind="name" 這個(gè)用不了~~ 

    ng:bind="name"

    ng_bind="name"

    ng-bind="name"

    data-ng-bind="name"

    x-ng-bind="name"

　　在編譯過程中，compiler通過$interpolate服務(wù)匹配文本與屬性中的嵌入表達(dá)式（如{{something}}）。這些表達(dá)式將會(huì)注冊(cè)為watches，并且作為digest cycle(之前不是digest-loop嗎？！)的一部分，一同更新。下面是一個(gè)簡(jiǎn)單的interpolation：

Hello {{username}}!

　　HTML“編譯”的三個(gè)步驟：

　　1. 首先，通過瀏覽器的標(biāo)準(zhǔn)API，將HTML轉(zhuǎn)換為DOM對(duì)象。這是很重要的一步。因?yàn)槟０姹仨毷强山馕觯ǚ弦?guī)范）的HTML。這里可以跟大多數(shù)的模版系統(tǒng)做對(duì)比，它們一般是基于字符串的，而不是基于DOM元素的。

　　2. 對(duì)DOM的編譯（compilation）是通過調(diào)用$comple()方法完成的。這個(gè)方法遍歷DOM，對(duì)directive進(jìn)行匹配。如果匹配成功，那么它將與對(duì)應(yīng)的DOM一起，加入到directive列表中。只要所有與指定DOM關(guān)聯(lián)的directive被識(shí)別出來，他們將按照優(yōu)先級(jí)排序，并按照這個(gè)順序執(zhí)行他們的compile() 函數(shù)。directive的編譯函數(shù)（compile function），擁有一個(gè)修改DOM結(jié)構(gòu)的機(jī)會(huì)，并負(fù)責(zé)產(chǎn)生link() function的解析。$compile()方法返回一個(gè)組合的linking function，是所有directive自身的compile function返回的linking function的集合。

　　3. 通過上一步返回的linking function，將模版與scope連接起來。這反過來會(huì)調(diào)用directive自身的linking function，允許它們?cè)谠厣献?cè)一些監(jiān)聽器（listener），以及與scope一起建立一些watches。這樣得出的結(jié)果，是在scope與DOM之間的一個(gè)雙向、即時(shí)的綁定。scope發(fā)生改變時(shí)，DOM會(huì)得到對(duì)應(yīng)的響應(yīng)。

    var $compile = ...; // injected into your code

    var scope = ...;

    var html = "
";

    // Step 1: parse HTML into DOM element
    var template = angular.element(html);

    // Step 2: compile the template
    var linkFn = $compile(template);

    // Step 3: link the compiled template with the scope.
    linkFn(scope);

　　在這個(gè)時(shí)候，你可能會(huì)想知道為什么編譯進(jìn)程會(huì)劃分為compile和linke兩個(gè)步驟。為了明白這一點(diǎn)，讓我們看看一個(gè)真實(shí)的例子（repeater）

    Hello {{user}}, you have these actions:
    

        
{{action.description}}
    

　簡(jiǎn)單地講，之所以分開compile和linke兩步，是因?yàn)橛袝r(shí)候需要在model改變后，對(duì)應(yīng)的DOM結(jié)構(gòu)也需要改變的情況，如repeaters。
　　當(dāng)上面的例子被編譯時(shí)，編譯器會(huì)遍歷所有節(jié)點(diǎn)以尋找directive。{{user}}是一個(gè)interpolation directive的例子。ngRepeat又是另外一個(gè)directive。但ngRepeat有一個(gè)難點(diǎn)。它需要能夠很快地為每一個(gè)在users.actions中的action制造出新的li的能力。這意味著它為了滿足克隆li并且嵌入特定的action（這里是指user的actions的其中一個(gè)值）的目的，需要保持一個(gè)干凈li元素的拷貝，li元素需要被克隆和插入ul元素。但僅僅克隆li元素是不夠的。還需要編譯li，以便它的directive（{{action.descriptions}}）能夠在正確的scope中被解析。原始的方法，一般會(huì)簡(jiǎn)單地插入一個(gè)li元素的拷貝，然后編譯它。但編譯每一個(gè)li元素的拷貝會(huì)比較緩慢，因?yàn)榫幾g過程需要我們遍歷DOM節(jié)點(diǎn)樹，查找directive并運(yùn)行它們。如果我們有一個(gè)編譯，需要通過repeater對(duì)100個(gè)item進(jìn)行處理，那么我們將陷入性能問題。

　　問題的解決方案，是將編譯過程分解為兩個(gè)步驟。compile階段識(shí)別出所有directive，并且將它們按照優(yōu)先級(jí)進(jìn)行排序，在linking階段將特定的scope與特定的li綁定在一起。

　　ngRepeat將各個(gè)li分開編譯以防止編譯過程落入li元素中。li元素的編譯結(jié)果是一個(gè)包含所有包含在li元素中的directive的linking function，準(zhǔn)備與特定li元素的拷貝進(jìn)行連接。在運(yùn)行時(shí)，ngRepeat監(jiān)測(cè)表達(dá)式，并作為一個(gè)item，被加入到一個(gè)li元素拷貝的數(shù)組，為克隆好的li元素創(chuàng)建新的scope，并調(diào)用該拷貝對(duì)應(yīng)的link function。

　　總結(jié)：

編譯函數(shù)(compile function) - 編譯函數(shù)在directive中是比較少見的，因?yàn)榇蠖鄶?shù)directive只關(guān)心與指定的DOM元素工作，而不是改變DOM元素的模版（DOM自身以及內(nèi)部的結(jié)構(gòu)）。為了優(yōu)化性能，一些可以被directive實(shí)例共享的操作，可以移動(dòng)到compile函數(shù)中。
連接函數(shù)(link function) - 極少directive是沒有l(wèi)ink function的。link function允許directive在指定的拷貝后的DOM元素實(shí)例上注冊(cè)監(jiān)聽器，也可以將scope中特定內(nèi)容復(fù)制到DOM中。

　　在這個(gè)例子里面，我們將建立一個(gè)根據(jù)輸入格式，顯示當(dāng)前時(shí)間的directive。

    
    





    Date format: 

    
    Current time is : 

    remove the span

　　下面是一個(gè)創(chuàng)建directive樣例（directive對(duì)象定義模版）。想看詳細(xì)列表，請(qǐng)繼續(xù)往下看。

var myModule = angular.module(...);



myModule.directive("directiveName", function factory(injectables) {

    var directiveDefinitionObject = {

    　　priority: 0,

    　　template: "
",

    　　templateUrl: "directive.html",

    　　replace: false,

    　　transclude: false,

    　　restrict: "A",

    　　scope: false,

    　　compile: function compile(tElement, tAttrs, transclude) {

    　　　　return {

    　　　　　　pre: function preLink(scope, iElement, iAttrs, controller) { ... },

    　　　　　　post: function postLink(scope, iElement, iAttrs, controller) { ... }

    　　　　}

    　　},

    　　link: function postLink(scope, iElement, iAttrs) { ... }

    };

    return directiveDefinitionObject;

 });

在大多數(shù)場(chǎng)景下，我們并不需要精確控制，所以上面的定義是可以化簡(jiǎn)的。定義模版中的每一部分，將在下面章節(jié)講解。在這個(gè)章節(jié)，我們僅僅關(guān)注定義模版的異構(gòu)體（isomers of this skeleton，沒看懂。。。期待大家補(bǔ)充）。

　　簡(jiǎn)化代碼的第一步是依賴默認(rèn)值。因此，上面的代碼可以簡(jiǎn)化為：

var myModule = angular.module(...);

    myModule.directive("directiveName", function factory(injectables) {
    　　var directiveDefinitionObject = {
    　　　　compile: function compile(tElement, tAttrs) {
    　　　　　　return function postLink(scope, iElement, iAttrs) { ... }
    　　　　}
    　　};
    　　return directiveDefinitionObject;
    });

　　大多數(shù)directive只關(guān)心實(shí)例，而不是模版轉(zhuǎn)換，所以可以進(jìn)一步化簡(jiǎn)（翻譯得很勉強(qiáng)。。。期待大家補(bǔ)充）：

 var myModule = angular.module(...);

    myModule.directive("directiveName", function factory(injectables) {
    　　return function postLink(scope, iElement, iAttrs) { ... }
    });

　　工廠方法負(fù)責(zé)創(chuàng)建directive。它僅僅使用一次，就在compiler第一次匹配到directive的時(shí)候。你可以在這里執(zhí)行一些初始化操作。工廠方法通過$injector.invoke執(zhí)行，讓它遵守所有注入聲明規(guī)則（rules of injection annotation），讓其變?yōu)榭勺⑷氲摹?/p> 八、directive定義對(duì)象說明

　　directive定義對(duì)象提供了compiler的結(jié)構(gòu)。屬性如下：

name - 當(dāng)前scope的名稱，注冊(cè)時(shí)可以使用默認(rèn)值（不填）。

priority（優(yōu)先級(jí)）- 當(dāng)有多個(gè)directive定義在同一個(gè)DOM元素時(shí)，有時(shí)需要明確它們的執(zhí)行順序。這屬性用于在directive的compile function調(diào)用之前進(jìn)行排序。如果優(yōu)先級(jí)相同，則執(zhí)行順序是不確定的（經(jīng)初步試驗(yàn)，優(yōu)先級(jí)高的先執(zhí)行，同級(jí)時(shí)按照類似棧的“后綁定先執(zhí)行”。另外，測(cè)試時(shí)有點(diǎn)不小心，在定義directive的時(shí)候，兩次定義了一個(gè)相同名稱的directive，但執(zhí)行結(jié)果發(fā)現(xiàn)，兩個(gè)compile或者link function都會(huì)執(zhí)行）。

terminal（最后一組）- 如果設(shè)置為”true”，則表示當(dāng)前的priority將會(huì)成為最后一組執(zhí)行的directive。任何directive與當(dāng)前的優(yōu)先級(jí)相同的話，他們依然會(huì)執(zhí)行，但順序是不確定的（雖然順序不確定，但基本上與priority的順序一致。當(dāng)前優(yōu)先級(jí)執(zhí)行完畢后，更低優(yōu)先級(jí)的將不會(huì)再執(zhí)行）。

scope - 如果設(shè)置為：

true - 將為這個(gè)directive創(chuàng)建一個(gè)新的scope。如果在同一個(gè)元素中有多個(gè)directive需要新的scope的話，它還是只會(huì)創(chuàng)建一個(gè)scope。新的作用域規(guī)則不適用于根模版（root of the template），因此根模版往往會(huì)獲得一個(gè)新的scope。

{}(object hash) - 將創(chuàng)建一個(gè)新的、獨(dú)立(isolate)的scope。”isolate” scope與一般的scope的區(qū)別在于它不是通過原型繼承于父scope的。這對(duì)于創(chuàng)建可復(fù)用的組件是很有幫助的，可以有效防止讀取或者修改父級(jí)scope的數(shù)據(jù)。這個(gè)獨(dú)立的scope會(huì)創(chuàng)建一個(gè)擁有一組來源于父scope的本地scope屬性(local scope properties)的object hash。這些local properties對(duì)于為模版創(chuàng)建值的別名很有幫助（useful for aliasing values for templates --!）。本地的定義是對(duì)其來源的一組本地scope property的hash映射(Locals definition is a hash of local scope property to its source #&)$&@#)($&@#)：

@或@attr - 建立一個(gè)local scope property到DOM屬性的綁定。因?yàn)閷傩灾悼偸荢tring類型，所以這個(gè)值總是返回一個(gè)字符串。如果沒有通過@attr指定屬性名稱，那么本地名稱將與DOM屬性的名稱一直。例如，widget的scope定義為：{localName:’@myAttr’}。那么，widget scope property的localName會(huì)映射出”hello {{name}}"轉(zhuǎn)換后的真實(shí)值。name屬性值改變后，widget scope的localName屬性也會(huì)相應(yīng)地改變（僅僅單向，與下面的”=”不同）。name屬性是在父scope讀取的（不是組件scope）

=或=expression（這里也許是attr） - 在本地scope屬性與parent scope屬性之間設(shè)置雙向的綁定。如果沒有指定attr名稱，那么本地名稱將與屬性名稱一致。例如，widget定義的scope為：{localModel:’=myAttr’}，那么widget scope property “l(fā)ocalName”將會(huì)映射父scope的“parentModel”。如果parentModel發(fā)生任何改變，localModel也會(huì)發(fā)生改變，反之亦然。（雙向綁定）

&或&attr - 提供一個(gè)在父scope上下文中執(zhí)行一個(gè)表達(dá)式的途徑。如果沒有指定attr的名稱，那么local name將與屬性名稱一致。例如，widget的scope定義為：{localFn:’increment()’}，那么isolate scope property “l(fā)ocalFn”會(huì)指向一個(gè)包裹著increment()表達(dá)式的function。一般來說，我們希望通過一個(gè)表達(dá)式，將數(shù)據(jù)從isolate scope傳到parent scope中。這可以通過傳送一個(gè)本地變量鍵值的映射到表達(dá)式的wrapper函數(shù)中來完成。例如，如果表達(dá)式是increment(amount)，那么我們可以通過localFn({amount:22})的方式調(diào)用localFn以指定amount的值（上面的例子真的沒看懂，&跑哪去了？）。

controller - controller 構(gòu)造函數(shù)。controller會(huì)在pre-linking步驟之前進(jìn)行初始化，并允許其他directive通過指定名稱的require進(jìn)行共享（看下面的require屬性）。這將允許directive之間相互溝通，增強(qiáng)相互之間的行為。controller默認(rèn)注入了以下本地對(duì)象：

$scope - 與當(dāng)前元素結(jié)合的scope

$element - 當(dāng)前的元素

$attrs - 當(dāng)前元素的屬性對(duì)象

$transclude - 一個(gè)預(yù)先綁定到當(dāng)前轉(zhuǎn)置scope的轉(zhuǎn)置linking function :function(cloneLinkingFn)。(A transclude linking function pre-bound to the correct transclusion scope)

require - 請(qǐng)求另外的controller，傳入當(dāng)前directive的linking function中。require需要傳入一個(gè)directive controller的名稱。如果找不到這個(gè)名稱對(duì)應(yīng)的controller，那么將會(huì)拋出一個(gè)error。名稱可以加入以下前綴：

? - 不要拋出異常。這使這個(gè)依賴變?yōu)橐粋€(gè)可選項(xiàng)。

^ - 允許查找父元素的controller

restrict - EACM的子集的字符串，它限制directive為指定的聲明方式。如果省略的話，directive將僅僅允許通過屬性聲明：

E - 元素名稱：

A - 屬性名：

• 上一篇：Responsive Javascript 是什么？
• 下一篇：在 jQuery 中如何判斷對(duì)象是否存在