深入學(xué)習(xí)JavaScript的AngularJS框架中指令的使用方法

更新時(shí)間：2016年03月05日 18:15:48 作者：sitepoint

這篇文章主要介紹了深入學(xué)習(xí)JavaScript的AngularJS框架中指令的使用方法,指令的使用是Angular入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下

指令（Directives）是所有AngularJS應(yīng)用最重要的部分。盡管AngularJS已經(jīng)提供了非常豐富的指令，但還是經(jīng)常需要?jiǎng)?chuàng)建應(yīng)用特定的指令。這篇教程會(huì)為你講述如何自定義指令，以及介紹如何在實(shí)際項(xiàng)目中使用。在這篇文章的最后（第二部分），我會(huì)指導(dǎo)你如何使用Angular指令來創(chuàng)建一個(gè)簡(jiǎn)單的記事本應(yīng)用。

概述

一個(gè)指令用來引入新的HTML語法。指令是DOM元素上的標(biāo)記，使元素?fù)碛刑囟ǖ男袨?。舉例來說，靜態(tài)的HTML不知道如何來創(chuàng)建和展現(xiàn)一個(gè)日期選擇器控件。讓HTML能識(shí)別這個(gè)語法，我們需要使用指令。指令通過某種方法來創(chuàng)建一個(gè)能夠支持日期選擇的元素。我們會(huì)循序漸進(jìn)地介紹這是如何實(shí)現(xiàn)的。如果你寫過AngularJS的應(yīng)用，那么你一定已經(jīng)使用過指令，不管你有沒有意識(shí)到。你肯定已經(jīng)用過簡(jiǎn)單的指令，比如 ng-mode, ng-repeat, ng-show等。這些指令都賦予DOM元素特定的行為。例如，ng-repeat 重復(fù)特定的元素，ng-show 有條件地顯示一個(gè)元素。如果你想讓一個(gè)元素支持拖拽，你也需要?jiǎng)?chuàng)建一個(gè)指令來實(shí)現(xiàn)它。指令背后基本的想法很簡(jiǎn)單。它通過對(duì)元素綁定事件監(jiān)聽或者改變DOM而使HTML擁有真實(shí)的交互性。

jQuery視角

想象一下使用jQuery如何創(chuàng)建一個(gè)日期選擇器。首先，我們?cè)贖TML中添加一個(gè)普通的輸入框，然后通過jQuery調(diào)用 $(element).dataPicker() 來將它轉(zhuǎn)變成一個(gè)日期選擇器。但是，仔細(xì)想一下。當(dāng)一個(gè)設(shè)計(jì)人員過來檢查HTML標(biāo)記的時(shí)候，他/她能否立刻猜到這個(gè)字段實(shí)際上表示的內(nèi)容？這只是一個(gè)簡(jiǎn)單的輸入框，或者一個(gè)日期選擇器？你需要查看jQuery代碼來確定這些。而Angular的方法是使用一個(gè)指令來擴(kuò)展HTML。所以，一個(gè)日期選擇器的指令可以是下面的形式：

<input type="text" />

或者是這樣：

<input type="text" />

這種創(chuàng)建UI組建的方式更加直接和清晰。你可以輕易地通過查看元素就明白這到底是什么。

創(chuàng)建自定義指令：

一個(gè)Angular指令可以有以下的四種表現(xiàn)形式： 1. 一個(gè)新的HTML元素（<data-picker></data-picker>） 2. 元素的屬性（<input type=”text” data-picker/>） 3. CSS class（<input type=”text” class=”data-picker”/>） 4. 注釋（<!–directive:data-picker –>）當(dāng)然，我們可以控制我們的指令在HTML中的表現(xiàn)形式。下面我們來看一下AngularJS中的一個(gè)典型的指令的寫法。指令注冊(cè)的方式與 controller 一樣，但是它返回的是一個(gè)擁有指令配置屬性的簡(jiǎn)單對(duì)象(指令定義對(duì)象) 。下面的代碼是一個(gè)簡(jiǎn)單的 Hello World 指令。

var app = angular.module('myapp', []);
 
app.directive('helloWorld', function() {
 return {
   restrict: 'AE',
   replace: 'true',
   template: '<h3>Hello World!!</h3>'
 };
});

在上面的代碼中，app.directive()方法在模塊中注冊(cè)了一個(gè)新的指令。這個(gè)方法的第一個(gè)參數(shù)是這個(gè)指令的名字。第二個(gè)參數(shù)是一個(gè)返回指令定義對(duì)象的函數(shù)。如果你的指令依賴于其他的對(duì)象或者服務(wù)，比如 $rootScope, $http, 或者$compile，他們可以在這個(gè)時(shí)間被注入。這個(gè)指令在HTML中以一個(gè)元素使用，如下：

<hello-world/>
//OR
<hello:world/>

或者，以一個(gè)屬性的方式使用：

<div hello-world></div>
//OR
<div hello:world/>

如果你想要符合HTML5的規(guī)范，你可以在元素前面添加 x- 或者 data-的前綴。所以下面的標(biāo)記也會(huì)匹配 helloWorld 指令：

<div data-hello-world></div>
//OR
<div x-hello-world></div>

注意：在匹配指令的時(shí)候，Angular會(huì)在元素或者屬性的名字中剔除 x- 或者 data- 前綴。然后將 – 或者 : 連接的字符串轉(zhuǎn)換成駝峰(camelCase)表現(xiàn)形式，然后再與注冊(cè)過的指令進(jìn)行匹配。這是為什么，我們?cè)贖TML中以 hello-world 的方式使用 helloWorld 指令。其實(shí)，這跟HTML對(duì)標(biāo)簽和屬性不區(qū)分大小寫有關(guān)。盡管上面的指令僅僅實(shí)現(xiàn)了靜態(tài)文字的顯示，但是這里還是有一些有趣的點(diǎn)值得我們?nèi)ネ诰?。我們?cè)谥噶疃x過程中使用了三個(gè)屬性來配置指令。我們來一一介紹他們的作用。

restrict – 這個(gè)屬性用來指定指令在HTML中如何使用（還記得之前說的，指令的四種表示方式嗎）。在上面的例子中，我們使用了 ‘AE'。所以這個(gè)指令可以被當(dāng)作新的HTML元素或者屬性來使用。如果要允許指令被當(dāng)作class來使用，我們將 restrict 設(shè)置成 ‘AEC'。
template – 這個(gè)屬性規(guī)定了指令被Angular編譯和鏈接（link）后生成的HTML標(biāo)記。這個(gè)屬性值不一定要是簡(jiǎn)單的字符串。template 可以非常復(fù)雜，而且經(jīng)常包含其他的指令，以及表達(dá)式({{ }})等。更多的情況下你可能會(huì)見到 templateUrl，而不是 template。所以，理想情況下，你應(yīng)該將模板放到一個(gè)特定的HTML文件中，然后將 templateUrl 屬性指向它。
replace – 這個(gè)屬性指明生成的HTML內(nèi)容是否會(huì)替換掉定義此指令的HTML元素。在我們的例子中，我們用 <hello-world></hello-world>的方式使用我們的指令，并且將 replace 設(shè)置成 true。所以，在指令被編譯之后，生成的模板內(nèi)容替換掉了 <hello-world></hello-world>。最終的輸出是 <h3>Hello World!!</h3>。如果你將 replace 設(shè)置成 false，也就是默認(rèn)值，那么生成的模板會(huì)被插入到定義指令的元素中。

打開這個(gè) plunker，在”Hello World!!”右鍵檢查元素內(nèi)容，來更形象地明白這些。

Link函數(shù)和Scope

指令生成出的模板其實(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)記如下：

<body ng-controller="MainCtrl">
 <input type="text" ng-model="color" placeholder="Enter a color" />
 <hello-world/>
</body>

修改后的 helloWorld 指令如下：

app.directive('helloWorld', function() {
 return {
  restrict: 'AE',
  replace: true,
  template: '<p style="background-color:{{color}}">Hello World',
  link: function(scope, elem, attrs) {
   elem.bind('click', function() {
    elem.css('background-color', 'white');
    scope.$apply(function() {
     scope.color = "white";
    });
   });
   elem.bind('mouseover', function() {
    elem.css('cursor', 'pointer');
   });
  }
 };
});

我們注意到指令定義中的 link 函數(shù)。它有三個(gè)參數(shù)：

scope – 指令的scope。在我們的例子中，指令的scope就是父controller的scope。
elem – 指令的jQLite(jQuery的子集)包裝DOM元素。如果你在引入AngularJS之前引入了jQuery，那么這個(gè)元素就是jQuery元素，而不是jQLite元素。由于這個(gè)元素已經(jīng)被jQuery/jQLite包裝了，所以我們就在進(jìn)行DOM操作的時(shí)候就不需要再使用 $()來進(jìn)行包裝。
attr – 一個(gè)包含了指令所在元素的屬性的標(biāo)準(zhǔn)化的參數(shù)對(duì)象。舉個(gè)例子，你給一個(gè)HTML元素添加了一些屬性：，那么可以在 link 函數(shù)中通過 attrs.someAttribute 來使用它。

link函數(shù)主要用來為DOM元素添加事件監(jiān)聽、監(jiān)視模型屬性變化、以及更新DOM。在上面的指令代碼片段中，我們添加了兩個(gè)事件， click，和 mouseover。click 處理函數(shù)用來重置 <p> 的背景色，而 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)。

改變指令的Scope

默認(rèn)情況下，指令獲取它父節(jié)點(diǎn)的controller的scope。但這并不適用于所有情況。如果將父controller的scope暴露給指令，那么他們可以隨意地修改 scope 的屬性。在某些情況下，你的指令希望能夠添加一些僅限內(nèi)部使用的屬性和方法。如果我們?cè)诟傅膕cope中添加，會(huì)污染父scope。其實(shí)我們還有兩種選擇：

一個(gè)子scope – 這個(gè)scope原型繼承子父scope。
一個(gè)隔離的scope – 一個(gè)孤立存在不繼承自父scope的scope。
這樣的scope可以通過指令定義對(duì)象中 scope 屬性來配置。下面的代碼片段是一個(gè)例子：

app.directive('helloWorld', function() {
 return {
  scope: true, 
// use a child scope that inherits from parent
  restrict: 'AE',
  replace: 'true',
  template: '<h3>Hello World!!</h3>'
 };
});

上面的代碼，讓Angular給指令創(chuàng)建一個(gè)繼承自父socpe的新的子scope。另外一個(gè)選擇，隔離的scope：

app.directive('helloWorld', function() {
 return {
  scope: {}, 
// use a new isolated scope
  restrict: 'AE',
  replace: 'true',
  template: '<h3>Hello World!!</h3>'
 };
});

這個(gè)指令使用了一個(gè)隔離的scope。隔離的scope在我們想要?jiǎng)?chuàng)建可重用的指令的時(shí)候是非常有好處的。通過使用隔離的scope，我們能夠保證我們的指令是自包含的，可以被很容易的插入到HTML應(yīng)用中。它內(nèi)部不能訪問父的scope，所保證了父scope不被污染。在我們的 helloWorld 指令例子中，如果我們將 scope 設(shè)置成 {}，那么上面的代碼將不會(huì)工作。它會(huì)創(chuàng)建一個(gè)新的隔離的scope，那么相應(yīng)的表達(dá)式 {{color}} 會(huì)指向到這個(gè)新的scope中，它的值將是 undefined. 使用隔離的scope并不意味著我們完全不能訪問父scope的屬性。

隔離scope和父scope之間的數(shù)據(jù)綁定

通常，隔離指令的scope會(huì)帶來很多的便利，尤其是在你要操作多個(gè)scope模型的時(shí)候。但有時(shí)為了使代碼能夠正確工作，你也需要從指令內(nèi)部訪問父scope的屬性。好消息是Angular給了你足夠的靈活性讓你能夠有選擇性的通過綁定的方式傳入父scope的屬性。讓我們重溫一下我們的 helloWorld 指令，它的背景色會(huì)隨著用戶在輸入框中輸入的顏色名稱而變化。還記得當(dāng)我們對(duì)這個(gè)指令使用隔離scope的之后，它不能工作了嗎？現(xiàn)在，我們來讓它恢復(fù)正常。

假設(shè)我們已經(jīng)初始化完成app這個(gè)變量所指向的Angular模塊。那么我們的 helloWorld 指令如下面代碼所示：

app.directive('helloWorld', function() {
 return {
  scope: {},
  restrict: 'AE',
  replace: true,
  template: '<p style="background-color:{{color}}">Hello World</p>',
  link: function(scope, elem, attrs) {
   elem.bind('click', function() {
    elem.css('background-color','white');
    scope.$apply(function() {
     scope.color = "white";
    });
   });
   elem.bind('mouseover', function() {
    elem.css('cursor', 'pointer');
   });
  }
 };
});

使用這個(gè)指令的HTML標(biāo)簽如下：

<body ng-controller="MainCtrl">
 <input type="text" ng-model="color" placeholder="Enter a color"/>
 <hello-world/>
</body>

上面的代碼現(xiàn)在是不能工作的。因?yàn)槲覀冇昧艘粋€(gè)隔離的scope，指令內(nèi)部的 {{color}} 表達(dá)式被隔離在指令內(nèi)部的scope中(不是父scope)。但是外面的輸入框元素中的 ng-model 指令是指向父scope中的 color 屬性的。所以，我們需要一種方式來綁定隔離scope和父scope中的這兩個(gè)參數(shù)。在Angular中，這種數(shù)據(jù)綁定可以通過為指令所在的HTML元素添加屬性和并指令定義對(duì)象中配置相應(yīng)的 scope 屬性來實(shí)現(xiàn)。讓我們來細(xì)究一下建立數(shù)據(jù)綁定的幾種方式。

選擇一：使用 @ 實(shí)現(xiàn)單向文本綁定

在下面的指令定義中，我們指定了隔離scope中的屬性 color 綁定到指令所在HTML元素上的參數(shù) colorAttr。在HTML標(biāo)記中，你可以看到 {{color}}表達(dá)式被指定給了 color-attr 參數(shù)。當(dāng)表達(dá)式的值發(fā)生改變時(shí)，color-attr 參數(shù)也跟著改變。隔離scope中的 color 屬性的值也相應(yīng)地被改變。

app.directive('helloWorld', function() {
 return {
  scope: {
   color: '@colorAttr'
  },
  ....
  
// the rest of the configurations
 };
});

更新后的HTML標(biāo)記代碼如下：

<body ng-controller="MainCtrl">
 <input type="text" ng-model="color" placeholder="Enter a color"/>
 <hello-world color-attr="{{color}}"/>
</body>

我們稱這種方式為單項(xiàng)綁定，是因?yàn)樵谶@種方式下，你只能將字符串(使用表達(dá)式{{}})傳遞給參數(shù)。當(dāng)父scope的屬性變化時(shí)，你的隔離scope模型中的屬性值跟著變化。你甚至可以在指令內(nèi)部監(jiān)控這個(gè)scope屬性的變化，并且觸發(fā)一些任務(wù)。然而，反向的傳遞并不工作。你不能通過對(duì)隔離scope屬性的操作來改變父scope的值。

注意點(diǎn)：
當(dāng)隔離scope屬性和指令元素參數(shù)的名字一樣是，你可以更簡(jiǎn)單的方式設(shè)置scope綁定：

app.directive('helloWorld', function() {
 return {
  scope: {
   color: '@'
  },
  ....
  
// the rest of the configurations
 };
});

相應(yīng)使用指令的HTML代碼如下：

<hello-world color="{{color}}"/>

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

讓我們將指令的定義改變成下面的樣子：

app.directive('helloWorld', function() {
 return {
  scope: {
   color: '='
  },
  ....
  
// the rest of the configurations
 };
});

相應(yīng)的HTML修改如下：

<body ng-controller="MainCtrl">
 <input type="text" ng-model="color" placeholder="Enter a color"/>
 <hello-world color="color"/>
</body>

與 @ 不同，這種方式讓你能夠給屬性指定一個(gè)真實(shí)的scope數(shù)據(jù)模型，而不是簡(jiǎn)單的字符串。這樣你就可以傳遞簡(jiǎn)單的字符串、數(shù)組、甚至復(fù)雜的對(duì)象給隔離scope。同時(shí)，還支持雙向的綁定。每當(dāng)父scope屬性變化時(shí)，相對(duì)應(yīng)的隔離scope中的屬性也跟著改變，反之亦然。和之前的一樣，你也可以監(jiān)視這個(gè)scope屬性的變化。

選擇三：使用 & 在父scope中執(zhí)行函數(shù)

有時(shí)候從隔離scope中調(diào)用父scope中定義的函數(shù)是非常有必要的。為了能夠訪問外部scope中定義的函數(shù)，我們使用 &。比如我們想要從指令內(nèi)部調(diào)用 sayHello() 方法。下面的代碼告訴我們?cè)撛趺醋觯?/p>

app.directive('sayHello', function() {
 return {
  scope: {
   sayHelloIsolated: '&amp;'
  },
  ....
  
// the rest of the configurations
 };
});

相應(yīng)的HTML代碼如下：

<body ng-controller="MainCtrl">
 <input type="text" ng-model="color" placeholder="Enter a color"/>
 <say-hello sayHelloIsolated="sayHello()"/>
</body>

這個(gè) Plunker 例子對(duì)上面的概念做了很好的詮釋。

父scope、子scope以及隔離scope的區(qū)別

作為一個(gè)Angular的新手，你可能會(huì)在選擇正確的指令scope的時(shí)候感到困惑。默認(rèn)情況下，指令不會(huì)創(chuàng)建一個(gè)新的scope，而是沿用父scope。但是在很多情況下，這并不是我們想要的。如果你的指令重度地使用父scope的屬性、甚至創(chuàng)建新的屬性，會(huì)污染父scope。讓所有的指令都使用同一個(gè)父scope不會(huì)是一個(gè)好主意，因?yàn)槿魏稳硕伎赡苄薷倪@個(gè)scope中的屬性。因此，下面的這個(gè)原則也許可以幫助你為你的指令選擇正確的scope。

1.父scope(scope: false) – 這是默認(rèn)情況。如果你的指令不操作父scoe的屬性，你就不需要一個(gè)新的scope。這種情況下是可以使用父scope的。

2.子scope(scope: true) – 這會(huì)為指令創(chuàng)建一個(gè)新的scope，并且原型繼承自父scope。如果你的指令scope中的屬性和方法與其他的指令以及父scope都沒有關(guān)系的時(shí)候，你應(yīng)該創(chuàng)建一個(gè)新scope。在這種方式下，你同樣擁有父scope中所定義的屬性和方法。

3.隔離scope(scope:{}) – 這就像一個(gè)沙箱！當(dāng)你創(chuàng)建的指令是自包含的并且可重用的，你就需要使用這種scope。你在指令中會(huì)創(chuàng)建很多scope屬性和方法，它們僅在指令內(nèi)部使用，永遠(yuǎn)不會(huì)被外部的世界所知曉。如果是這樣的話，隔離的scope是更好的選擇。隔離的scope不會(huì)繼承父scope。

Transclusion（嵌入）

Transclusion是讓我們的指令包含任意內(nèi)容的方法。我們可以延時(shí)提取并在正確的scope下編譯這些嵌入的內(nèi)容，最終將它們放入指令模板中指定的位置。如果你在指令定義中設(shè)置 transclude:true，一個(gè)新的嵌入的scope會(huì)被創(chuàng)建，它原型繼承子父scope。如果你想要你的指令使用隔離的scope，但是它所包含的內(nèi)容能夠在父scope中執(zhí)行，transclusion也可以幫忙。

假設(shè)我們注冊(cè)一個(gè)如下的指令：

app.directive('outputText', function() {
 return {
  transclude: true,
  scope: {},
  template: '<div ng-transclude></div>'
 };
});

它使用如下：

<div output-text>
 <p>Hello {{name}}</p>
</div>

ng-transclude 指明在哪里放置被嵌入的內(nèi)容。在這個(gè)例子中DOM內(nèi)容 <p>Hello {{name}}</p> 被提取和放置到 <div ng-transclude></div> 內(nèi)部。有一個(gè)很重要的點(diǎn)需要注意的是，表達(dá)式{{name}}所對(duì)應(yīng)的屬性是在父scope中被定義的，而非子scope。你可以在這個(gè)Plunker例子中做一些實(shí)驗(yàn)。如果你想要學(xué)習(xí)更多關(guān)于scope的知識(shí)，可以閱讀這篇文章。

transclude:'element' 和 transclude:true的區(qū)別

有時(shí)候我我們要嵌入指令元素本身，而不僅僅是它的內(nèi)容。在這種情況下，我們需要使用 transclude:'element'。它和 transclude:true 不同，它將標(biāo)記了 ng-transclude 指令的元素一起包含到了指令模板中。使用transclusion，你的link函數(shù)會(huì)獲得一個(gè)名叫 transclude 的鏈接函數(shù)，這個(gè)函數(shù)綁定了正確的指令scope，并且傳入了另一個(gè)擁有被嵌入DOM元素拷貝的函數(shù)。你可以在這個(gè) transclude 函數(shù)中執(zhí)行比如修改元素拷貝或者將它添加到DOM上等操作。類似 ng-repeat 這樣的指令使用這種方式來重復(fù)DOM元素。仔細(xì)研究一下這個(gè)Plunker，它使用這種方式復(fù)制了DOM元素，并且改變了第二個(gè)實(shí)例的背景色。

同樣需要注意的是，在使用 transclude:'element'的時(shí)候，指令所在的元素會(huì)被轉(zhuǎn)換成HTML注釋。所以，如果你結(jié)合使用 transclude:'element' 和 replace:false，那么指令模板本質(zhì)上是被添加到了注釋的innerHTML中——也就是說其實(shí)什么都沒有發(fā)生！相反，如果你選擇使用 replace:true，指令模板會(huì)替換HTML注釋，那么一切就會(huì)如果所愿的工作。使用 replade:false 和 transclue:'element'有時(shí)候也是有用的，比如當(dāng)你需要重復(fù)DOM元素但是并不想保留第一個(gè)元素實(shí)例（它會(huì)被轉(zhuǎn)換成注釋）的情況下。對(duì)這塊還有疑惑的同學(xué)可以閱讀stackoverflow上的這篇討論，介紹的比較清晰。

controller 函數(shù)和 require

如果你想要允許其他的指令和你的指令發(fā)生交互時(shí)，你需要使用 controller 函數(shù)。比如有些情況下，你需要通過組合兩個(gè)指令來實(shí)現(xiàn)一個(gè)UI組件。那么你可以通過如下的方式來給指令添加一個(gè) controller 函數(shù)。

app.directive('outerDirective', function() {
 return {
  scope: {},
  restrict: 'AE',
  controller: function($scope, $compile, $http) {
   
// $scope is the appropriate scope for the directive
   this.addChild = function(nestedDirective) { 
// this refers to the controller
    console.log('Got the message from nested directive:' + nestedDirective.message);
   };
  }
 };
});

這個(gè)代碼為指令添加了一個(gè)名叫 outerDirective 的controller。當(dāng)另一個(gè)指令想要交互時(shí)，它需要聲明它對(duì)你的指令 controller 實(shí)例的引用(require)?？梢酝ㄟ^如下的方式實(shí)現(xiàn)：

app.directive('innerDirective', function() {
 return {
  scope: {},
  restrict: 'AE',
  require: '^outerDirective',
  link: function(scope, elem, attrs, controllerInstance) {
   
//the fourth argument is the controller instance you require
   scope.message = "Hi, Parent directive";
   controllerInstance.addChild(scope);
  }
 };
});

相應(yīng)的HTML代碼如下：

<outer-directive>
 <inner-directive></inner-directive>
</outer-directive>

require: ‘^outerDirective' 告訴Angular在元素以及它的父元素中搜索controller。這樣被找到的 controller 實(shí)例會(huì)作為第四個(gè)參數(shù)被傳入到 link 函數(shù)中。在我們的例子中，我們將嵌入的指令的scope發(fā)送給父親指令。如果你想嘗試這個(gè)代碼的話，請(qǐng)?jiān)陂_啟瀏覽器控制臺(tái)的情況下打開這個(gè)Plunker。同時(shí)，這篇Angular官方文檔上的最后部分給了一個(gè)非常好的關(guān)于指令交互的例子，是非常值得一讀的。

一個(gè)記事本應(yīng)用

這一部分，我們使用Angular指令創(chuàng)建一個(gè)簡(jiǎn)單的記事本應(yīng)用。我們會(huì)使用HTML5的 localStorage 來存儲(chǔ)筆記。最終的產(chǎn)品在這里，你可以先睹為快。
我們會(huì)創(chuàng)建一個(gè)展現(xiàn)記事本的指令。用戶可以查看他/她創(chuàng)建過的筆記記錄。當(dāng)他點(diǎn)擊 add new 按鈕的時(shí)候，記事本會(huì)進(jìn)入可編輯狀態(tài)，并且允許創(chuàng)建新的筆記。當(dāng)點(diǎn)擊 back 按鈕的時(shí)候，新的筆記會(huì)被自動(dòng)保存。筆記的保存使用了一個(gè)名叫 noteFactory 的工廠類，它使用了 localStorage。工廠類中的代碼是非常直接和可理解的。所以我們就集中討論指令的代碼。

第一步

我們從注冊(cè) notepad 指令開始。

app.directive('notepad', function(notesFactory) {
 return {
  restrict: 'AE',
  scope: {},
  link: function(scope, elem, attrs) {
  },
  templateUrl: 'templateurl.html'
 };
});

這里有幾點(diǎn)需要注意的：

因?yàn)槲覀兿胱屩噶羁芍赜茫赃x擇使用隔離的scope。這個(gè)指令可以擁有很多與外界沒有關(guān)聯(lián)的屬性和方法。
這個(gè)指令可以以屬性或者元素的方式被使用，這個(gè)被定義在 restrict 屬性中。
現(xiàn)在的link函數(shù)是空的
這個(gè)指令從 templateurl.html 中獲取指令模板
第二步

下面的HTML組成了指令的模板。

<div class="note-area" ng-show="!editMode">
 <ul>
  <li ng-repeat="note in notes|orderBy:'id'">
   <a href="#" ng-click="openEditor(note.id)">{{note.title}}</a>
  </li>
 </ul>
</div>
<div id="editor" ng-show="editMode" class="note-area" contenteditable="true" ng-bind="noteText"></div>
<span><a href="#" ng-click="save()" ng-show="editMode">Back</a></span>
<span><a href="#" ng-click="openEditor()" ng-show="!editMode">Add Note</a></span>

幾個(gè)重要的注意點(diǎn)：

note 對(duì)象中封裝了 title，id 和 content。
ng-repeat 用來遍歷 notes 中所有的筆記，并且按照自動(dòng)生成的 id 屬性進(jìn)行升序排序。
我們使用一個(gè)叫 editMode 的屬性來指明我們現(xiàn)在在哪種模式下。在編輯模式下，這個(gè)屬性的值為 true 并且可編輯的 div 節(jié)點(diǎn)會(huì)顯示。用戶在這里輸入自己的筆記。
如果 editMode 為 false，我們就在查看模式，顯示所有的 notes。
兩個(gè)按鈕也是基于 editMode 的值而顯示和隱藏。
ng-click 指令用來響應(yīng)按鈕的點(diǎn)擊事件。這些方法將和 editMode 一起添加到scope中。
可編輯的 div 框與 noteText 相綁定，存放了用戶輸入的文本。如果你想編輯一個(gè)已存在的筆記，那么這個(gè)模型會(huì)用它的文本內(nèi)容初始化這個(gè) div 框。
第三步

我們?cè)趕cope中創(chuàng)建一個(gè)名叫 restore() 的新函數(shù)，它用來初始化我們應(yīng)用中的各種控制器。它會(huì)在 link 函數(shù)執(zhí)行的時(shí)候被調(diào)用，也會(huì)在 save 按鈕被點(diǎn)擊的時(shí)候調(diào)用。

scope.restore = function() {
 scope.editMode = false;
 scope.index = -1;
 scope.noteText = '';
};

我們?cè)?link 函數(shù)的內(nèi)部創(chuàng)建這個(gè)函數(shù)。 editMode 和 noteText 之前已經(jīng)解釋過了。 index 用來跟蹤當(dāng)前正在編輯的筆記。當(dāng)我們?cè)趧?chuàng)建一個(gè)新的筆記的時(shí)候，index 的值會(huì)設(shè)成 -1. 我們?cè)诰庉嬕粋€(gè)已存在的筆記的時(shí)候，它包含了那個(gè) note 對(duì)象的 id 值。

第四步

現(xiàn)在我們要?jiǎng)?chuàng)建兩個(gè)scope函數(shù)來處理編輯和保存操作。

scope.openEditor = function(index) {
 scope.editMode = true;
 
 if (index !== undefined) {
  scope.noteText = notesFactory.get(index).content;
  scope.index = index;
 } else {
  scope.noteText = undefined;
 }
};
 
scope.save = function() {
 if (scope.noteText !== '') {
  var note = {};
 
  note.title = scope.noteText.length > 10 ? scope.noteText.substring(0, 10) + '. . .' : scope.noteText;
  note.content = scope.noteText;
  note.id = scope.index != -1 ? scope.index : localStorage.length;
  scope.notes = notesFactory.put(note);
 }
 
 scope.restore();
};

這兩個(gè)函數(shù)有幾點(diǎn)需要注意：

openEditor 為編輯器做準(zhǔn)備工作。如果我們?cè)诰庉嬕粋€(gè)筆記，它會(huì)獲取當(dāng)前筆記的內(nèi)容并且通過使用 ng-bind 將內(nèi)容更新到可編輯的 div 中。
如果我們?cè)趧?chuàng)建一個(gè)新的筆記，我們會(huì)將 noteText 設(shè)置成 undefined，以便當(dāng)我們?cè)诒４婀P記的時(shí)候，觸發(fā)相應(yīng)的監(jiān)聽器。
如果 index 參數(shù)是 undefined，它表明用戶正在創(chuàng)建一個(gè)新的筆記。
save 函數(shù)通過使用 notesFactory 來存儲(chǔ)筆記。在保存完成后，它會(huì)刷新 notes 數(shù)組，從而監(jiān)聽器能夠監(jiān)測(cè)到筆記列表的變化，來及時(shí)更新。
save 函數(shù)調(diào)用在重置 controllers 之后調(diào)用restore()，從而可以從編輯模式進(jìn)入查看模式。
第五步

在 link 函數(shù)執(zhí)行時(shí)，我們初始化 notes 數(shù)組，并且為可編輯的 div 框綁定一個(gè) keydown 事件，從而保證我們的 nodeText 模型與 div 中的內(nèi)容保持同步。我們使用這個(gè) noteText 來保存我們的筆記內(nèi)容。

var editor = elem.find('#editor');
 
scope.restore(); 
// initialize our app controls
scope.notes = notesFactory.getAll(); 
// load notes
 
editor.bind('keyup keydown', function() {
 scope.noteText = editor.text().trim();
});

第六步

最后，我們?cè)贖TML如同使用其他的HTML元素一樣使用我們的指令，然后開始做筆記吧。

<h1 class="title">The Note Making App</h1>
<notepad/>

總結(jié)

一個(gè)很重要的點(diǎn)需要注意的是，任何使用jQuery能做的事情，我們都能用Angular指令來做到，并且使用更少的代碼。所以，在使用jQuery之前，請(qǐng)考慮一下我們能否在不進(jìn)行DOM操作的情況下以更好的方式來完成任務(wù)。試著使用Angular來最小化jQuery的使用吧。
再來看一下我們的筆記本應(yīng)用，刪除筆記的功能被故意漏掉了。鼓勵(lì)讀者們自己實(shí)驗(yàn)和實(shí)現(xiàn)這個(gè)功能。你可以從GitHub上下到這個(gè)Demo的源代碼。

您可能感興趣的文章: