今天就跟大家聊聊有關(guān)Angular中scope作用域如何使用,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結(jié)了以下內(nèi)容,希望大家根據(jù)這篇文章可以有所收獲。
成都創(chuàng)新互聯(lián)2013年開創(chuàng)至今,是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司,擁有項(xiàng)目成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)網(wǎng)站策劃,項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢想脫穎而出為使命,1280元綏濱做網(wǎng)站,已為上家服務(wù),為綏濱各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:13518219792Scope(作用域) 是應(yīng)用在 HTML (視圖) 和 JavaScript (控制器)之間的紐帶。
Scope 是一個(gè)對象,有可用的方法和屬性。
Scope 可應(yīng)用在視圖和控制器上。
$rootScope
每個(gè)AngularJs應(yīng)用默認(rèn)有一個(gè)根作用域--$rootScope, 根作用域位于最頂層,作為其他作用域的父作用域,可作用于整個(gè)應(yīng)用中。
$scope
scope(作用域)對應(yīng)MVC模式的Model,是應(yīng)用在HTML(視圖)和JavaScript(控制器)之間的紐帶,可應(yīng)用在視圖和控制器上。
scope是表達(dá)式執(zhí)行的上下文,同時(shí)作用域也是一個(gè)對象,有可用的方法和屬性。
一、變量的取值和賦值
{{number}}function parentCtrl($scope){ $scope.number = 1; } function childCtrl($scope){ }{{number}}
效果:
界面上顯示了兩個(gè)1,但當(dāng)我們點(diǎn)擊按鈕之后,childCtrl作用域內(nèi)的數(shù)據(jù)改變了,parentCtrl作用域內(nèi)的數(shù)據(jù)沒有改變
分析:
①childCtrl作用域繼承了parentCtrl作用域(類似于JavaScript的原型鏈繼承),所以childCtrl作用域可以訪問到parentCtrl的內(nèi)容。
②點(diǎn)擊按鈕后childCtrl作用域就會(huì)創(chuàng)建一個(gè)number基礎(chǔ)類型變量,當(dāng)childCtrl已有某個(gè)基礎(chǔ)類型變量就不會(huì)訪問原型鏈。
解決:
①可以使用$parent來指定上級作用域改變
{{number}}{{number}}
②使用引用類型變量,內(nèi)外層作用域均是data對象的引用,修改對象的屬性,引用的還是同一個(gè)變量。
{{data.number}}function parentCtrl($scope){ $scope.data.number = 123'; } function childCtrl($scope){ }{{data.number}}
ng-if、ng-repeat、ng-switch、ng-include等指令也會(huì)產(chǎn)生新作用域
二、Directive中的作用域
.directive("myDirective", function () { return { restrict: "AE", scope: { name: '@myName', age: '=', changeAge: '&changeMyAge' }, replace: true, template: "" + "我的名字是:" }
" + "我的年齡是:
" + "在這里修改名字:
" + "" + "
①scope:false
當(dāng)scope設(shè)置為false的時(shí)候,我們創(chuàng)建的指令和父作用域(其實(shí)是同一個(gè)作用域)共享同一個(gè)model模型,所以在指令中修改模型數(shù)據(jù),它會(huì)反映到父作用域的模型中。
②scope:true
當(dāng)scope設(shè)置為true的時(shí)候,我們就新創(chuàng)建了一個(gè)作用域,只不過這個(gè)作用域是繼承的父作用域;可以這樣理解,我們新創(chuàng)建的作用域是一個(gè)新的作用域,只不過在初始化的時(shí)候,用了父作用域的屬性和方法去填充我們這個(gè)新的作用域。它和父作用域不是同一個(gè)作用域。
③scope:{}
@ 這是一個(gè)單項(xiàng)綁定的前綴標(biāo)識符
屬性的名字要用-將兩個(gè)單詞連接,因?yàn)槭菙?shù)據(jù)的單項(xiàng)綁定所以要通過使用{{}}來綁定數(shù)據(jù)。
= 這是一個(gè)雙向數(shù)據(jù)綁定前綴標(biāo)識符
數(shù)據(jù)的雙向綁定要通過=前綴標(biāo)識符實(shí)現(xiàn),所以不可以使用{{}}。
& 這是一個(gè)綁定函數(shù)方法的前綴標(biāo)識符
屬性的名字要用-將多個(gè)個(gè)單詞連接。
看完上述內(nèi)容,你們對Angular中scope作用域如何使用有進(jìn)一步的了解嗎?如果還想了解更多知識或者相關(guān)內(nèi)容,請關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道,感謝大家的支持。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn,海內(nèi)外云服務(wù)器15元起步,三天無理由+7*72小時(shí)售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢,專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應(yīng)用場景需求。