大家好谆奥，我是IT修真院深圳分院第01期學(xué)員，一枚正直純潔善良的web程序員拂玻。
今天給大家分享一下酸些，修真院官網(wǎng)js任務(wù)8，深度思考中的知識(shí)點(diǎn)——如何理解angular自定義指令directive的scope屬性檐蚜？
一魄懂、背景介紹
在AngularJS中，除了內(nèi)置指令如ng-click等闯第，我們還可以自定義指令市栗。自定義指令，是為了擴(kuò)展DOM元素的功能咳短。代碼中填帽，通過(guò)指定directive中的restrict屬性，來(lái)決定這個(gè)指令是作為標(biāo)簽（E）咙好、屬性（A）篡腌、屬性值（C）、還是注釋?zhuān)∕）勾效。指令的定義過(guò)程就不詳述了嘹悼，今天小課堂主要是講關(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毁菱。然而雖然說(shuō)是“隔離”膛腐，但通常我們還是需要讓這個(gè)子scope跟父scope中的變量進(jìn)行綁定睛约。綁定的策略有3種：@、=哲身、&辩涝。
三、常見(jiàn)問(wèn)題
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。
首先我們來(lái)看一下材蹬，當(dāng)scope參數(shù)被設(shè)置為false時(shí)有什么情況發(fā)生在這種情況下实幕，在指令模板中可以直接使用父作用域中的變量，函數(shù)堤器。首先我們來(lái)創(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è)作用域繼承自我們的父作用域勇哗。等等，剛才我們不是說(shuō)了寸齐，當(dāng)把scope屬性值設(shè)置為false時(shí)欲诺，不也是繼承我們的父作用域嗎？表急渺鹦，我們接著往下看扰法。
修改上面的JS代碼，將指令中的：scope:false修改為scope:true ?demo2
然后我們?cè)僭囍谖覀兊膇nput輸入框中寫(xiě)一些字符串毅厚，會(huì)發(fā)現(xiàn)塞颁，指令中的那個(gè)name發(fā)生了變化，但是指令外的那個(gè)name卻沒(méi)有發(fā)生變化，這說(shuō)明了一個(gè)問(wèn)題祠锣。
當(dāng)我們將scope設(shè)置為true的時(shí)候酷窥，我們就新創(chuàng)建了一個(gè)作用域，只不過(guò)這個(gè)作用域是繼承了我們的父作用域伴网；我覺(jué)得可以這樣理解蓬推，我們新創(chuàng)建的作用域是一個(gè)新的作用域，只不過(guò)在初始化的時(shí)候澡腾，用了父作用域的屬性和方法去填充我們這個(gè)新的作用域沸伏。它和父作用域不是同一個(gè)作用域。
我們將scope設(shè)置為false的時(shí)候,我們創(chuàng)建的指令和父作用域（其實(shí)是同一個(gè)作用域）共享同一個(gè)model模型动分，所以在指令中修改模型數(shù)據(jù)毅糟，它會(huì)反映到父作用域的模型中。
4.3 scope = {}
AngularJS最強(qiáng)的大的地方之一就是它可以構(gòu)建組件澜公，無(wú)論放在哪里都是可以使用的姆另；這所以可以做到這些，不得不歸功于指令的這個(gè)屬性坟乾；當(dāng)我們將scope設(shè)置為{}時(shí)迹辐，意味著我們創(chuàng)建的一個(gè)新的與父作用域隔離的新的作用域，這使我們?cè)诓恢劳獠凯h(huán)境的情況下糊渊，就可以正常工作，不依賴外部環(huán)境慧脱。
當(dāng)然首先我們還是要給出我們的例子渺绒，先看代碼,我們修改了上述的JS代碼和HTML代碼JS代碼：demo3
我們使用了隔離的作用域，不代表我們不可以使用父作用域的屬性和方法菱鸥。
我們可以通過(guò)向scope的{}中傳入特殊的前綴標(biāo)識(shí)符（即prefix）宗兼，來(lái)進(jìn)行數(shù)據(jù)的綁定。
下面我們來(lái)看看如何使用這些前綴標(biāo)識(shí)符：
1.@：?jiǎn)蜗蚪壎ǖ桑獠縮cope能夠影響內(nèi)部scope殷绍，但反過(guò)來(lái)不成立；
注意鹊漠，屬性的名字要用-將兩個(gè)單詞連接主到，因?yàn)槭菙?shù)據(jù)的單項(xiàng)綁定所以要通過(guò)使用{{}}來(lái)綁定數(shù)據(jù)。
具體看demo3.1（看控制臺(tái)）
2躯概、=：雙向綁定登钥，外部scope和內(nèi)部scope的model能夠相互改變；
注意娶靡，數(shù)據(jù)的雙向綁定要通過(guò)=前綴標(biāo)識(shí)符實(shí)現(xiàn)牧牢，所以不可以使用{{}}。具體看demo3.2
3、&：把內(nèi)部scope的函數(shù)的返回值和外部scope的任何屬性綁定起來(lái)塔鳍。這是一個(gè)綁定函數(shù)方法的前綴標(biāo)識(shí)符伯铣。
注意，屬性的名字要用-將多個(gè)個(gè)單詞連接轮纫。具體看demo3.3
注意：在新創(chuàng)建指令的作用域?qū)ο笾星还眩褂脤傩缘拿诌M(jìn)行綁定時(shí)，要使用駝峰命名標(biāo)準(zhǔn)蜡感，比如下面的代碼蹬蚁。
scope: {
? ? ? ? // `myName`就是原來(lái)元素中的`my-name`屬性
? ? ? ? name: '@myName',
? ? ? ? age: '=',
? ? ? ? // `changeMyAge`就是原來(lái)元素中的`change-my-age`屬性
? ? ? ? changeAge: '&changeMyAge'
}
五、編碼實(shí)戰(zhàn)
詳見(jiàn)視頻：
六犀斋、拓展思考
我們的指令是如何利用這些前綴標(biāo)識(shí)符來(lái)尋找我們想要的屬性或者函數(shù)的？
@當(dāng)指令編譯到模板的name時(shí)情连，就會(huì)到scope中尋找是否含有name的鍵值對(duì)叽粹，如果存在，就像上面那樣却舀，看到@就知道這是一個(gè)單向的數(shù)據(jù)綁定虫几，然后尋找原來(lái)的那個(gè)使用指令的元素上（或者是指令元素本身）含有這個(gè)值的屬性即my-name={{name}}，然后在父作用域查找{{name}}的值挽拔，得到之后傳遞給模板中的name辆脸。
=和&與@差不多，只不過(guò)=進(jìn)行的是雙向的數(shù)據(jù)綁定螃诅，不論模板還是父作用域上的屬性的值發(fā)生改變都會(huì)使另一個(gè)值發(fā)生改變啡氢，而&是綁定函數(shù)而已。
七术裸、參考文獻(xiàn)
參考二：一招制敵 - 玩轉(zhuǎn) AngularJS 指令的 Scope (作用域)
八倘是、更多討論
詳見(jiàn)視頻。
感謝大家觀看
今天的分享就到這里啦袭艺，歡迎大家點(diǎn)贊搀崭、轉(zhuǎn)發(fā)、留言猾编、拍磚~
你可以直接點(diǎn)擊此鏈接與我一起學(xué)習(xí)：邀請(qǐng)碼
