轉(zhuǎn)自

學(xué)習(xí)了AngularJS好長時(shí)間什往，最近再次回首看看指令這部分的時(shí)候板驳，覺得比自己剛開始學(xué)習(xí)的時(shí)候理解的更加深入了单绑，尤其是指令的作用域這部分嘱函。
當(dāng)初看的是《AngularJS權(quán)威指南》這本書，但是感覺這本書關(guān)于這方面講的不是很細(xì)致列另，另外吐槽一下芽腾，這本書中文版印刷的質(zhì)量不是很好，很多地方都有錯(cuò)誤页衙；不過講的還是可以的摊滔，是一本學(xué)習(xí)AngularJS的好書。
下面我們就來詳細(xì)分析一下指令的作用域店乐。在這之前希望你對(duì)AngularJS的Directive有一定的了解,不然你對(duì)下面部分的理解可能會(huì)有一點(diǎn)難度艰躺。
步入正題：
每當(dāng)一個(gè)指令被創(chuàng)建的時(shí)候，都會(huì)有這樣一個(gè)選擇眨八，是繼承自己的父作用域（一般是外部的Controller提供的作用域或者根作用域（$rootScope））腺兴，還是創(chuàng)建一個(gè)新的自己的作用域，當(dāng)然AngularJS為我們指令的scope
參數(shù)提供了三種選擇廉侧，分別是：

• false
• true
• {}

默認(rèn)情況下是false

scope = false

首先我們來看一下页响，當(dāng)scope參數(shù)被設(shè)置為false時(shí)有什么情況發(fā)生
在這種情況下，在指令模板中可以直接使用父作用域中的變量段誊，函數(shù)首先我們來創(chuàng)建一個(gè)指令闰蚕，代碼如下所示：JS代碼：

angular.module("MyApp", []) 
    .controller("MyController", function ($scope) { 
//J1 這里我們?cè)谧饔糜蚶锍跏蓟瘍蓚€(gè)變量
 $scope.name = "dreamapple";
 $scope.age = 20; //J2 創(chuàng)建一個(gè)方法，修改我們創(chuàng)建的對(duì)象的年齡 $scope.changeAge = function () {
 $scope.age = 22; 
}}) 
//J3 創(chuàng)建我們的指令枕扫，指令名字為"myDirective" .directive("myDirective", function () {
 var obj = { 
//J4 指令的聲明模式為 "AE" 屬性和元素 restrict: "AE", //J5 指令繼承父作用域的屬性和方法
 scope: false,
 replace: true,
 template: "<div class='my-directive'>" + "<h3>下面部分是我們創(chuàng)建的指令生成的</h3>" + "我的名字是：<span ng-bind='name'></span><br/>" + "我的年齡是：<span ng-bind='age'></span>" + "<input type='text' ng-model='name'>"+ " </div>" 
} return obj;
});

HTML代碼：

<div ng-app="MyApp"> <div class="container" ng-controller="MyController"> <div class="my-info">我的名字是：<span ng-bind="name"></span> <!-- 使用"ng-bind"防止網(wǎng)絡(luò)狀態(tài)不佳時(shí)出現(xiàn)沒有被賦值表達(dá)式 --> <br/>我的年齡是：<span ng-bind="age"></span> </div> <!-- 使用屬性聲明指令 --> <div class="my-directive" my-directive></div> </div></div>

CSS代碼：

div{ padding: 6px;}div.container { border: 1px solid black;}div.my-info { border: 1px solid blue;}div.my-directive{ border: 1px solid green;}

Online Code Part1點(diǎn)擊預(yù)覽

下面我們來詳細(xì)解釋一下上面的代碼：
因?yàn)槲覀儗cope
的屬性設(shè)置為false
所以陪腌，我們創(chuàng)建的指令繼承了父作用域的一切屬性和方法，這也使得在指令的模板中我們可以使用這些屬性和方法烟瞧。

注意：此時(shí)我們?cè)谳斎肟蚶锔淖兠质迹瑫?huì)發(fā)現(xiàn)上面的兩個(gè)名字都發(fā)生了變化，你肯定會(huì)說参滴，這肯定是這樣啊强岸，數(shù)據(jù)綁定嘛，好砾赔，我們接著往下走蝌箍。

scope = true

當(dāng)把scope屬性設(shè)置為true時(shí)，這表明我們創(chuàng)建的指令要?jiǎng)?chuàng)建一個(gè)新的作用域暴心，這個(gè)作用域繼承自我們的父作用域妓盲。等等，剛才我們不是說了专普，當(dāng)把scope
屬性值設(shè)置為false
時(shí)悯衬，不也是繼承我們的父作用域嗎？表急檀夹，我們接著往下看筋粗。
修改上面的JS代碼策橘，將指令中的：
scope:false
修改為scope:true

然后我們?cè)僭囍谖覀兊膇nput
輸入框中寫一些字符串，會(huì)發(fā)現(xiàn)娜亿，指令中的那個(gè)name
發(fā)生了變化丽已，但是指令外的那個(gè)name
卻沒有發(fā)生變化，這說明了一個(gè)問題买决。
當(dāng)我們將scope
設(shè)置為true
的時(shí)候沛婴，我們就新創(chuàng)建了一個(gè)作用域，只不過這個(gè)作用域是繼承了我們的父作用域策州；我覺得可以這樣理解瘸味，我們新創(chuàng)建的作用域是一個(gè)新的作用域，只不過在初始化的時(shí)候够挂，用了父作用域的屬性和方法去填充我們這個(gè)新的作用域旁仿。它和父作用域不是同一個(gè)作用域。
當(dāng)我們將scope
設(shè)置為false
的時(shí)候,我們創(chuàng)建的指令和父作用域（其實(shí)是同一個(gè)作用域）共享同一個(gè)model
模型孽糖，所以在指令中修改模型數(shù)據(jù)枯冈，它會(huì)反映到父作用域的模型中。Online Code Part2點(diǎn)擊預(yù)覽

scope = {}

下面我們要進(jìn)入一個(gè)好玩的部分办悟，當(dāng)我們將scope
的屬性設(shè)置為{}
時(shí)尘奏，我們可以做更多的事情。
AngularJS最強(qiáng)的大的地方之一就是它可以構(gòu)建組建病蛉，無論放在哪里都是可以使用的炫加；這所以可以做到這些，不得不歸功于指令的這個(gè)屬性铺然；當(dāng)我們將scope
設(shè)置為{}
時(shí)俗孝，意味著我們創(chuàng)建的一個(gè)新的與父作用域隔離的新的作用域，這使我們?cè)诓恢劳獠凯h(huán)境的情況下魄健，就可以正常工作赋铝，不依賴外部環(huán)境。
當(dāng)然首先我們還是要給出我們的例子沽瘦，先看代碼,我們修改了上述的JS代碼和HTML代碼JS代碼：

angular.module("MyApp", []) .controller("MyController", function ($scope) { $scope.name = "dreamapple"; $scope.age = 20; $scope.changeAge = function(){ $scope.age = 0; }}) .directive("myDirective", function () { var obj = { restrict: "AE", scope: { name: '@myName', age: '=', changeAge: '&changeMyAge' }, replace: true, template: "<div class='my-directive'>" + "<h3>下面部分是我們創(chuàng)建的指令生成的</h3>" + "我的名字是：<span ng-bind='name'></span><br/>" + "我的年齡是：<span ng-bind='age'></span><br/>" + "在這里修改名字：<input type='text' ng-model='name'><br/>" + "<button ng-click='changeAge()'>修改年齡</button>" + " </div>" } return obj;});

HTML代碼：

<div ng-app="MyApp"> <div class="container" ng-controller="MyController"> <div class="my-info">我的名字是：<span ng-bind="name"></span> <br/>我的年齡是：<span ng-bind="age"></span> <br /> </div> <div class="my-directive" my-directive my-name="{{name}}" age="age" change-my-age="changeAge()"></div> </div></div>

Online Code Part3點(diǎn)擊預(yù)覽

我們使用了隔離的作用域革骨，不代表我們不可以使用父作用域的屬性和方法。
我們可以通過向scope
的{}
中傳入特殊的前綴標(biāo)識(shí)符（即prefix
）析恋，來進(jìn)行數(shù)據(jù)的綁定良哲。
在創(chuàng)建了隔離的作用域，我們可以通過

• @
• &
• =

引用應(yīng)用指令的元素的屬性助隧，如上面的代碼那樣臂外，我們可以在<div class="my-directive" my-directive my-name="{{name}}" age="age" change-my-age="changeAge()"></div>
這個(gè)元素中，利用前綴標(biāo)識(shí)符通過使用屬性my-name
,age
,change-my-age
來引用這些屬性的值喇颁。

下面我們來看看如何使用這些前綴標(biāo)識(shí)符：

@

這是一個(gè)單項(xiàng)綁定的前綴標(biāo)識(shí)符使用方法：在元素中使用屬性漏健，好比這樣<div my-directive my-name="{{name}}"></div>
，注意橘霎，屬性的名字要用-
將兩個(gè)單詞連接蔫浆，因?yàn)槭菙?shù)據(jù)的單項(xiàng)綁定所以要通過使用{{}}
來綁定數(shù)據(jù)。

=

這是一個(gè)雙向數(shù)據(jù)綁定前綴標(biāo)識(shí)符使用方法：在元素中使用屬性姐叁，好比這樣<div my-directive age="age"></div>
,注意瓦盛，數(shù)據(jù)的雙向綁定要通過=
前綴標(biāo)識(shí)符實(shí)現(xiàn)，所以不可以使用{{}}
外潜。

&

這是一個(gè)綁定函數(shù)方法的前綴標(biāo)識(shí)符使用方法：在元素中使用屬性原环，好比這樣<div my-directive change-my-age="changeAge()"></div>
，注意处窥，屬性的名字要用-
將多個(gè)個(gè)單詞連接嘱吗。
注意：在新創(chuàng)建指令的作用域?qū)ο笾校褂脤傩缘拿诌M(jìn)行綁定時(shí)滔驾，要使用駝峰命名標(biāo)準(zhǔn)谒麦，比如下面的代碼。

scope: { // myName 就是原來元素中的my-name屬性 name: '@myName', age: '=', // changeMyAge就是原來元素中的change-my-age屬性 changeAge: '&changeMyAge' }

進(jìn)一步說明哆致，我們的指令是如何利用這些前綴標(biāo)識(shí)符來尋找我們想要的屬性或者函數(shù)的绕德？
@
當(dāng)指令編譯到模板的name
時(shí)，就會(huì)到scope
中尋找是否含有name
的鍵值對(duì)摊阀，如果存在耻蛇，就像上面那樣，看到@
就知道這是一個(gè)單向的數(shù)據(jù)綁定胞此，然后尋找原來的那個(gè)使用指令的元素上（或者是指令元素本身）含有這個(gè)值的屬性即my-name={{name}}
臣咖，然后在父作用域查找{{name}}
的值，得到之后傳遞給模板中的name
豌鹤。
=
和&
與@
差不多亡哄，只不過=
進(jìn)行的是雙向的數(shù)據(jù)綁定，不論模板還是父作用域上的屬性的值發(fā)生改變都會(huì)使另一個(gè)值發(fā)生改變布疙，而&
是綁定函數(shù)而已蚊惯。