大家好，我是IT修真院深圳分院第01期學(xué)員，一枚正直純潔善良的web程序員。
今天給大家分享一下，修真院官網(wǎng)js任務(wù)8，深度思考中的知識(shí)點(diǎn)——如何理解angular自定義指令directive的scope屬性？
一、背景介紹
在AngularJS中，除了內(nèi)置指令如ng-click等，我們還可以自定義指令。自定義指令，是為了擴(kuò)展DOM元素的功能。代碼中，通過指定directive中的restrict屬性，來決定這個(gè)指令是作為標(biāo)簽（E）、屬性（A）、屬性值（C）、還是注釋（M）。指令的定義過程就不詳述了，今天小課堂主要是講關(guān)于scope屬性取值的區(qū)別。
二、知識(shí)剖析
$scope的使用貫穿整個(gè)AngularJS App應(yīng)用,它與數(shù)據(jù)模型相關(guān)聯(lián),同時(shí)也是表達(dá)式執(zhí)行的上下文.有了$scope就在視圖和控制器之間建立了一個(gè)通道,基于作用域視圖在修改數(shù)據(jù)時(shí)會(huì)立刻更新$scope,同樣的$scope發(fā)生改變時(shí)也會(huì)立刻重新渲染視圖.有了$scope這樣一個(gè)橋梁,應(yīng)用的業(yè)務(wù)代碼可以都在controller中,而數(shù)據(jù)都存放在controller的$scope中.
2.1 $scope的作用
$scope對(duì)象在AngularJS中充當(dāng)數(shù)據(jù)模型的作用,也就是一般MVC框架中Model得角色.但又不完全與通常意義上的數(shù)據(jù)模型一樣,因?yàn)?scope并不處理和操作數(shù)據(jù),它只是建立了視圖和HTML之間的橋梁,讓視圖和Controller之間可以友好的通訊.
2.2 scope屬性的3種取值
① false（默認(rèn)值）：直接使用父scope。
② true：繼承父scope
③ 對(duì)象{ }：創(chuàng)建一個(gè)新的“隔離”scope，但仍可與父scope通信。隔離的scope，通常用于創(chuàng)建可復(fù)用的指令，也就是它不用管父scope中的model。然而雖然說是“隔離”，但通常我們還是需要讓這個(gè)子scope跟父scope中的變量進(jìn)行綁定。綁定的策略有3種：@、=、&。
三、常見問題
scope屬性的3種取值對(duì)指令有什么影響?
四、解決方案
每當(dāng)一個(gè)指令被創(chuàng)建的時(shí)候，都會(huì)有這樣一個(gè)選擇，是繼承自己的父作用域（一般是外部的Controller提供的作用域或者根作用域（$rootScope）），還是創(chuàng)建一個(gè)新的自己的作用域，當(dāng)然AngularJS為我們指令的scope參數(shù)提供了三種選擇，分別是：false,true,{}；默認(rèn)情況下是false。
4.1 scope = false。
首先我們來看一下，當(dāng)scope參數(shù)被設(shè)置為false時(shí)有什么情況發(fā)生在這種情況下，在指令模板中可以直接使用父作用域中的變量，函數(shù)。首先我們來創(chuàng)建一個(gè)指令，代碼如下所示：demo1
因?yàn)槲覀儗cope的屬性設(shè)置為false所以，我們創(chuàng)建的指令繼承了父作用域的一切屬性和方法，這也使得在指令的模板中我們可以使用這些屬性和方法。
注意：此時(shí)我們?cè)谳斎肟蚶锔淖兠郑瑫?huì)發(fā)現(xiàn)上面的兩個(gè)名字都發(fā)生了變化。
4.2 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 ?demo2
然后我們?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è)作用域。
我們將scope設(shè)置為false的時(shí)候,我們創(chuàng)建的指令和父作用域（其實(shí)是同一個(gè)作用域）共享同一個(gè)model模型，所以在指令中修改模型數(shù)據(jù)，它會(huì)反映到父作用域的模型中。
4.3 scope = {}
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代碼：demo3
我們使用了隔離的作用域，不代表我們不可以使用父作用域的屬性和方法。
我們可以通過向scope的{}中傳入特殊的前綴標(biāo)識(shí)符（即prefix），來進(jìn)行數(shù)據(jù)的綁定。
下面我們來看看如何使用這些前綴標(biāo)識(shí)符：
1.@：?jiǎn)蜗蚪壎?，外部scope能夠影響內(nèi)部scope，但反過來不成立；
注意，屬性的名字要用-將兩個(gè)單詞連接，因?yàn)槭菙?shù)據(jù)的單項(xiàng)綁定所以要通過使用{{}}來綁定數(shù)據(jù)。
具體看demo3.1（看控制臺(tái)）
2、=：雙向綁定，外部scope和內(nèi)部scope的model能夠相互改變；
注意，數(shù)據(jù)的雙向綁定要通過=前綴標(biāo)識(shí)符實(shí)現(xiàn)，所以不可以使用{{}}。具體看demo3.2
3、&：把內(nèi)部scope的函數(shù)的返回值和外部scope的任何屬性綁定起來。這是一個(gè)綁定函數(shù)方法的前綴標(biāo)識(shí)符。
注意，屬性的名字要用-將多個(gè)個(gè)單詞連接。具體看demo3.3
注意：在新創(chuàng)建指令的作用域?qū)ο笾?，使用屬性的名字進(jìn)行綁定時(shí)，要使用駝峰命名標(biāo)準(zhǔn)，比如下面的代碼。
scope: {
? ? ? ? // `myName`就是原來元素中的`my-name`屬性
? ? ? ? name: '@myName',
? ? ? ? age: '=',
? ? ? ? // `changeMyAge`就是原來元素中的`change-my-age`屬性
? ? ? ? changeAge: '&changeMyAge'
}
五、編碼實(shí)戰(zhà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ù)而已。
七、參考文獻(xiàn)
參考二：一招制敵 - 玩轉(zhuǎn) AngularJS 指令的 Scope (作用域)
八、更多討論
詳見視頻。
感謝大家觀看
今天的分享就到這里啦，歡迎大家點(diǎn)贊、轉(zhuǎn)發(fā)、留言、拍磚~
你可以直接點(diǎn)擊此鏈接與我一起學(xué)習(xí)：邀請(qǐng)碼
