這個系列教程的第一部分給出了AngularJS指令的基本概述，在文章的最後我們介紹瞭如何隔離一個指令的scope。第二部分將承接上一篇繼續介紹。首先，我們會看到在使用隔離scope的情況下，如何從指令內部訪問到父scope的屬性。接着，我們會基於對 controller 函數和 transclusions 討論如何爲指令選擇正確的scope。這篇文章的最後會以通過一個完整的記事本應用來實踐指令的使用。
隔離scope和父scope之間的數據綁定
通常，隔離指令的scope會帶來很多的便利，尤其是在你要操作多個scope模型的時候。但有時爲了使代碼能夠正確工作，你也需要從指令內部訪問父scope的屬性。好消息是Angular給了你足夠的靈活性讓你能夠有選擇性的通過綁定的方式傳入父scope的屬性。讓我們重溫一下我們的 helloWorld指令，它的背景色會隨着用戶在輸入框中輸入的顏色名稱而變化。還記得當我們對這個指令使用隔離scope的之後，它不能工作了嗎？現在，我們來讓它恢復正常。
假設我們已經初始化完成app這個變量所指向的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');});}};});使用這個指令的HTML標籤如下：
<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 屬性的值也相應地被改變。
app.directive('helloWorld', function() {return {scope: {color: '@colorAttr'},....// the rest of the configurations};});更新後的HTML標記代碼如下：
<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綁定：
app.directive('helloWorld', function() {return {scope: {color: '@'},....// the rest of the configurations};});相應使用指令的HTML代碼如下：
<hello-world color="`color`"/>
選擇二：使用 = 實現雙向綁定
讓我們將指令的定義改變成下面的樣子
app.directive('helloWorld', function() {return {scope: {color: '='},....// the rest of the configurations};});相應的HTML修改如下：
<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() 方法。下面的代碼告訴我們該怎麼做：
app.directive('sayHello', function() {return {scope: {sayHelloIsolated: '&'},....// the rest of the configurations};});
相應的HTML代碼如下：
<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。
原文鏈接： sitepoint 翻譯： 伯樂在線 - 陳 鑫偉
譯文鏈接： http://blog.jobbole.com/62999/