指令生成出的模板其實(shí)沒有太多意義，除非它在特定的scope下編譯。默認(rèn)情況下，指令并不會(huì)創(chuàng)建新的子scope。更多的，它使用父scope。也就是說，如果指令存在于一個(gè)controller下，它就會(huì)使用這個(gè)controller的scope。 如何運(yùn)用scope，我們要用到一個(gè)叫做 link 的函數(shù)。它由指令定義對(duì)象中的link屬性配置。讓我們來改變一下我們的 helloWorld 指令，當(dāng)用戶在一個(gè)輸入框中輸入一種顏色的名稱時(shí)，Hello World 文字的背景色自動(dòng)發(fā)生變化。同時(shí)，當(dāng)用戶在 Hello World 文字上點(diǎn)擊時(shí)，背景色變回白色。 相應(yīng)的HTML標(biāo)記如下：
的背景色，而 mouseover 處理函數(shù)改變鼠標(biāo)為 pointer。在模板中有一個(gè)表達(dá)式 {{color}}，當(dāng)父scope中的 color 發(fā)生變化時(shí)，它用來改變 Hello World 文字的背景色。 這個(gè) plunker 演示了這些概念。
compile函數(shù)
compile 函數(shù)在 link 函數(shù)被執(zhí)行之前用來做一些DOM改造。它接收下面的參數(shù)：
tElement – 指令所在的元素
attrs – 元素上賦予的參數(shù)的標(biāo)準(zhǔn)化列表
要注意的是 compile 函數(shù)不能訪問 scope，并且必須返回一個(gè) link 函數(shù)。但是如果沒有設(shè)置 compile 函數(shù)，你可以正常地配置 link 函數(shù)，（有了compile，就不能用link，link函數(shù)由compile返回）。compile函數(shù)可以寫成如下的形式：
app.directive('test', function() { return { compile: function(tElem,attrs) { //do optional DOM transformation here return function(scope,elem,attrs) { //linking function here }; } }; });
大多數(shù)的情況下，你只需要使用 link 函數(shù)。這是因?yàn)榇蟛糠值闹噶钪恍枰紤]注冊(cè)事件監(jiān)聽、監(jiān)視模型、以及更新DOM等，這些都可以在 link 函數(shù)中完成。 但是對(duì)于像 ng-repeat 之類的指令，需要克隆和重復(fù) DOM 元素多次，在 link 函數(shù)執(zhí)行之前由 compile 函數(shù)來完成。這就帶來了一個(gè)問題，為什么我們需要兩個(gè)分開的函數(shù)來完成生成過程，為什么不能只使用一個(gè)？要回答好這個(gè)問題，我們需要理解指令在Angular中是如何被編譯的！
指令是如何被編譯的
當(dāng)應(yīng)用引導(dǎo)啟動(dòng)的時(shí)候，Angular開始使用 $compile 服務(wù)遍歷DOM元素。這個(gè)服務(wù)基于注冊(cè)過的指令在標(biāo)記文本中搜索指令。一旦所有的指令都被識(shí)別后，Angular執(zhí)行他們的 compile 方法。如前面所講的，compile 方法返回一個(gè) link 函數(shù)，被添加到稍后執(zhí)行的 link 函數(shù)列表中。這被稱為編譯階段。如果一個(gè)指令需要被克隆很多次（比如 ng-repeat），compile函數(shù)只在編譯階段被執(zhí)行一次，復(fù)制這些模板，但是link 函數(shù)會(huì)針對(duì)每個(gè)被復(fù)制的實(shí)例被執(zhí)行。所以分開處理，讓我們?cè)谛阅苌嫌幸欢ǖ奶岣?。這也說明了為什么在 compile 函數(shù)中不能訪問到scope對(duì)象。 在編譯階段之后，就開始了鏈接（linking）階段。在這個(gè)階段，所有收集的 link 函數(shù)將被一一執(zhí)行。指令創(chuàng)造出來的模板會(huì)在正確的scope下被解析和處理，然后返回具有事件響應(yīng)的真實(shí)的DOM節(jié)點(diǎn)。
重慶分公司
重慶分公司
