這個系列教程的第一部分給出了AngularJS指令的基本概述，在文章的最後我們介紹瞭如何隔離一個指令的scope。第二部分將承接上一篇繼續介紹。首先，我們會看到在使用隔離scope的情況下，如何從指令內部訪問到父scope的屬性。接著，我們會基於對 controller 函式和 transclusions 討論如何為指令選擇正確的scope。這篇文章的最後會以通過一個完整的記事本應用來實踐指令的使用。
隔離scope和父scope之間的資料繫結
通常，隔離指令的scope會帶來很多的便利，尤其是在你要操作多個scope模型的時候。但有時為了使程式碼能夠正確工作，你也需要從指令內部訪問父scope的屬性。好訊息是Angular給了你足夠的靈活性讓你能夠有選擇性的通過繫結的方式傳入父scope的屬性。讓我們重溫一下我們的 helloWorld 指令，它的背景色會隨著使用者在輸入框中輸入的顏色名稱而變化。還記得當我們對這個指令使用隔離scope的之後，它不能工作了嗎？現在，我們來讓它恢復正常。
假設我們已經初始化完成app這個變數所指向的Angular模組。那麼我們的 helloWorld 指令如下面程式碼所示：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
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'); }); } }; }); |
使用這個指令的HTML標籤如下：
|
1 2 3 4 |
<body ng-controller="MainCtrl"> <input type="text" ng-model="color" placeholder="Enter a color"/> <hello-world/> </body> |
上面的程式碼現在是不能工作的。因為我們用了一個隔離的scope，指令內部的 {{color}} 表示式被隔離在指令內部的scope中(不是父scope)。但是外面的輸入框元素中的 ng-model 指令是指向父scope中的 color 屬性的。所以，我們需要一種方式來繫結隔離scope和父scope中的這兩個引數。在Angular中，這種資料繫結可以通過為指令所在的HTML元素新增屬性和並指令定義物件中配置相應的 scope 屬性來實現。讓我們來細究一下建立資料繫結的幾種方式。
選擇一：使用 @ 實現單向文字繫結
在下面的指令定義中，我們指定了隔離scope中的屬性 color 繫結到指令所在HTML元素上的引數 colorAttr。在HTML標記中，你可以看到 {{color}}表示式被指定給了 color-attr 引數。當表示式的值發生改變時，color-attr 引數也跟著改變。隔離scope中的 color 屬性的值也相應地被改變。
|
1 2 3 4 5 6 7 8 9 |
app.directive('helloWorld', function() { return { scope: { color: '@colorAttr' }, .... // the rest of the configurations }; }); |
更新後的HTML標記程式碼如下：
|
1 2 3 4 |
<body ng-controller="MainCtrl"> <input type="text" ng-model="color" placeholder="Enter a color"/> <hello-world color-attr="{{color}}"/> </body> |
我們稱這種方式為單項繫結，是因為在這種方式下，你只能將字串(使用表示式{{}})傳遞給引數。當父scope的屬性變化時，你的隔離scope模型中的屬性值跟著變化。你甚至可以在指令內部監控這個scope屬性的變化，並且觸發一些任務。然而，反向的傳遞並不工作。你不能通過對隔離scope屬性的操作來改變父scope的值。
注意點：
當隔離scope屬性和指令元素引數的名字一樣是，你可以更簡單的方式設定scope繫結：
|
1 2 3 4 5 6 7 8 9 |
app.directive('helloWorld', function() { return { scope: { color: '@' }, .... // the rest of the configurations }; }); |
相應使用指令的HTML程式碼如下：
|
1 |
<hello-world color="{{color}}"/> |
選擇二：使用 = 實現雙向繫結
讓我們將指令的定義改變成下面的樣子：
|
1 2 3 4 5 6 7 8 9 |
app.directive('helloWorld', function() { return { scope: { color: '=' }, .... // the rest of the configurations }; }); |
相應的HTML修改如下：
|
1 2 3 4 |
<body ng-controller="MainCtrl"> <input type="text" ng-model="color" placeholder="Enter a color"/> <hello-world color="color"/> </body> |
與 @ 不同，這種方式讓你能夠給屬性指定一個真實的scope資料模型，而不是簡單的字串。這樣你就可以傳遞簡單的字串、陣列、甚至複雜的物件給隔離scope。同時，還支援雙向的繫結。每當父scope屬性變化時，相對應的隔離scope中的屬性也跟著改變，反之亦然。和之前的一樣，你也可以監視這個scope屬性的變化。
選擇三：使用 & 在父scope中執行函式
有時候從隔離scope中呼叫父scope中定義的函式是非常有必要的。為了能夠訪問外部scope中定義的函式，我們使用 &。比如我們想要從指令內部呼叫 sayHello() 方法。下面的程式碼告訴我們該怎麼做：
|
1 2 3 4 5 6 7 8 9 |
app.directive('sayHello', function() { return { scope: { sayHelloIsolated: '&' }, .... // the rest of the configurations }; }); |
相應的HTML程式碼如下：
|
1 2 3 4 |
<body ng-controller="MainCtrl"> <input type="text" ng-model="color" placeholder="Enter a color"/> <say-hello sayHelloIsolated="sayHello()"/> </body> |
這個 Plunker 例子對上面的概念做了很好的詮釋。
父scope、子scope以及隔離scope的區別
作為一個Angular的新手，你可能會在選擇正確的指令scope的時候感到困惑。預設情況下，指令不會建立一個新的scope，而是沿用父scope。但是在很多情況下，這並不是我們想要的。如果你的指令重度地使用父scope的屬性、甚至建立新的屬性，會汙染父scope。讓所有的指令都使用同一個父scope不會是一個好主意，因為任何人都可能修改這個scope中的屬性。因此，下面的這個原則也許可以幫助你為你的指令選擇正確的scope。
1.父scope(scope: false) – 這是預設情況。如果你的指令不操作父scoe的屬性，你就不需要一個新的scope。這種情況下是可以使用父scope的。
2.子scope(scope: true) – 這會為指令建立一個新的scope，並且原型繼承自父scope。如果你的指令scope中的屬性和方法與其他的指令以及父scope都沒有關係的時候，你應該建立一個新scope。在這種方式下，你同樣擁有父scope中所定義的屬性和方法。
3.隔離scope(scope:{}) – 這就像一個沙箱！當你建立的指令是自包含的並且可重用的，你就需要使用這種scope。你在指令中會建立很多scope屬性和方法，它們僅在指令內部使用，永遠不會被外部的世界所知曉。如果是這樣的話，隔離的scope是更好的選擇。隔離的scope不會繼承父scope。
Transclusion（嵌入）
Transclusion是讓我們的指令包含任意內容的方法。我們可以延時提取並在正確的scope下編譯這些嵌入的內容，最終將它們放入指令模板中指定的位置。 如果你在指令定義中設定 transclude:true，一個新的嵌入的scope會被建立，它原型繼承子父scope。 如果你想要你的指令使用隔離的scope，但是它所包含的內容能夠在父scope中執行，transclusion也可以幫忙。
假設我們註冊一個如下的指令：
|
1 2 3 4 5 6 7 |
app.directive('outputText', function() { return { transclude: true, scope: {}, template: '<div ng-transclude></div>' }; }); |
它使用如下：
|
1 2 3 |
<div output-text> <p>Hello {{name}}</p> </div> |
ng-transclude 指明在哪裡放置被嵌入的內容。在這個例子中DOM內容 <p>Hello {{name}}</p> 被提取和放置到 <div ng-transclude></div> 內部。有一個很重要的點需要注意的是，表示式{{name}}所對應的屬性是在父scope中被定義的，而非子scope。你可以在這個Plunker例子中做一些實驗。如果你想要學習更多關於scope的知識，可以閱讀這篇文章。
transclude:’element’ 和 transclude:true的區別
有時候我我們要嵌入指令元素本身，而不僅僅是它的內容。在這種情況下，我們需要使用 transclude:’element’。它和 transclude:true 不同，它將標記了 ng-transclude 指令的元素一起包含到了指令模板中。使用transclusion，你的link函式會獲得一個名叫 transclude 的連結函式，這個函式繫結了正確的指令scope，並且傳入了另一個擁有被嵌入DOM元素拷貝的函式。你可以在這個 transclude 函式中執行比如修改元素拷貝或者將它新增到DOM上等操作。 類似 ng-repeat 這樣的指令使用這種方式來重複DOM元素。仔細研究一下這個Plunker，它使用這種方式複製了DOM元素，並且改變了第二個例項的背景色。
同樣需要注意的是，在使用 transclude:’element’的時候，指令所在的元素會被轉換成HTML註釋。所以，如果你結合使用 transclude:’element’ 和 replace:false，那麼指令模板本質上是被新增到了註釋的innerHTML中——也就是說其實什麼都沒有發生！相反，如果你選擇使用 replace:true，指令模板會替換HTML註釋，那麼一切就會如果所願的工作。使用 replade:false 和 transclue:’element’有時候也是有用的，比如當你需要重複DOM元素但是並不想保留第一個元素例項（它會被轉換成註釋）的情況下。對這塊還有疑惑的同學可以閱讀stackoverflow上的這篇討論，介紹的比較清晰。
controller 函式和 require
如果你想要允許其他的指令和你的指令發生互動時，你需要使用 controller 函式。比如有些情況下，你需要通過組合兩個指令來實現一個UI元件。那麼你可以通過如下的方式來給指令新增一個 controller 函式。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
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); }; } }; }); |
這個程式碼為指令新增了一個名叫 outerDirective 的controller。當另一個指令想要互動時，它需要宣告它對你的指令 controller 例項的引用(require)。可以通過如下的方式實現：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
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); } }; }); |
相應的HTML程式碼如下：
|
1 2 3 |
<outer-directive> <inner-directive></inner-directive> </outer-directive> |
require: ‘^outerDirective’ 告訴Angular在元素以及它的父元素中搜尋controller。這樣被找到的 controller 例項會作為第四個引數被傳入到 link 函式中。在我們的例子中，我們將嵌入的指令的scope傳送給父親指令。如果你想嘗試這個程式碼的話，請在開啟瀏覽器控制檯的情況下開啟這個Plunker。同時，這篇Angular官方文件上的最後部分給了一個非常好的關於指令互動的例子，是非常值得一讀的。
一個記事本應用
這一部分，我們使用Angular指令建立一個簡單的記事本應用。我們會使用HTML5的 localStorage 來儲存筆記。最終的產品在這裡，你可以先睹為快。
我們會建立一個展現記事本的指令。使用者可以檢視他/她建立過的筆記記錄。當他點選 add new 按鈕的時候，記事本會進入可編輯狀態，並且允許建立新的筆記。當點選 back 按鈕的時候，新的筆記會被自動儲存。筆記的儲存使用了一個名叫 noteFactory 的工廠類，它使用了 localStorage。工廠類中的程式碼是非常直接和可理解的。所以我們就集中討論指令的程式碼。
第一步
我們從註冊 notepad 指令開始。
|
1 2 3 4 5 6 7 8 9 |
app.directive('notepad', function(notesFactory) { return { restrict: 'AE', scope: {}, link: function(scope, elem, attrs) { }, templateUrl: 'templateurl.html' }; }); |
這裡有幾點需要注意的：
- 因為我們想讓指令可重用，所以選擇使用隔離的scope。這個指令可以擁有很多與外界沒有關聯的屬性和方法。
- 這個指令可以以屬性或者元素的方式被使用，這個被定義在 restrict 屬性中。
- 現在的link函式是空的
- 這個指令從 templateurl.html 中獲取指令模板
第二步
下面的HTML組成了指令的模板。
|
1 2 3 4 5 6 7 8 9 10 |
<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> |
幾個重要的注意點：
- note 物件中封裝了 title，id 和 content。
- ng-repeat 用來遍歷 notes 中所有的筆記，並且按照自動生成的 id 屬性進行升序排序。
- 我們使用一個叫 editMode 的屬性來指明我們現在在哪種模式下。在編輯模式下，這個屬性的值為 true 並且可編輯的 div 節點會顯示。使用者在這裡輸入自己的筆記。
- 如果 editMode 為 false，我們就在檢視模式，顯示所有的 notes。
- 兩個按鈕也是基於 editMode 的值而顯示和隱藏。
- ng-click 指令用來響應按鈕的點選事件。這些方法將和 editMode 一起新增到scope中。
- 可編輯的 div 框與 noteText 相繫結，存放了使用者輸入的文字。如果你想編輯一個已存在的筆記，那麼這個模型會用它的文字內容初始化這個 div 框。
第三步
我們在scope中建立一個名叫 restore() 的新函式，它用來初始化我們應用中的各種控制器。 它會在 link 函式執行的時候被呼叫，也會在 save 按鈕被點選的時候呼叫。
|
1 2 3 4 5 |
scope.restore = function() { scope.editMode = false; scope.index = -1; scope.noteText = ''; }; |
我們在 link 函式的內部建立這個函式。 editMode 和 noteText 之前已經解釋過了。 index 用來跟蹤當前正在編輯的筆記。 當我們在建立一個新的筆記的時候，index 的值會設成 -1. 我們在編輯一個已存在的筆記的時候，它包含了那個 note 物件的 id 值。
第四步
現在我們要建立兩個scope函式來處理編輯和儲存操作。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
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(); }; |
這兩個函式有幾點需要注意：
- openEditor 為編輯器做準備工作。如果我們在編輯一個筆記，它會獲取當前筆記的內容並且通過使用 ng-bind 將內容更新到可編輯的 div 中。
- 如果我們在建立一個新的筆記，我們會將 noteText 設定成 undefined，以便當我們在儲存筆記的時候，觸發相應的監聽器。
- 如果 index 引數是 undefined，它表明使用者正在建立一個新的筆記。
- save 函式通過使用 notesFactory 來儲存筆記。在儲存完成後，它會重新整理 notes 陣列，從而監聽器能夠監測到筆記列表的變化，來及時更新。
- save 函式呼叫在重置 controllers 之後呼叫restore()，從而可以從編輯模式進入檢視模式。
第五步
在 link 函式執行時，我們初始化 notes 陣列，並且為可編輯的 div 框繫結一個 keydown 事件，從而保證我們的 nodeText 模型與 div 中的內容保持同步。我們使用這個 noteText 來儲存我們的筆記內容。
|
1 2 3 4 5 6 7 8 |
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(); }); |
第六步
最後，我們在HTML如同使用其他的HTML元素一樣使用我們的指令，然後開始做筆記吧。
|
1 2 |
<h1 class="title">The Note Making App</h1> <notepad/> |
總結
一個很重要的點需要注意的是，任何使用jQuery能做的事情，我們都能用Angular指令來做到，並且使用更少的程式碼。所以，在使用jQuery之前，請考慮一下我們能否在不進行DOM操作的情況下以更好的方式來完成任務。試著使用Angular來最小化jQuery的使用吧。
再來看一下我們的筆記本應用，刪除筆記的功能被故意漏掉了。鼓勵讀者們自己實驗和實現這個功能。 你可以從GitHub上下到這個Demo的原始碼。