這篇文章將為大家詳細(xì)講解有關(guān)AngularJS中的作用域有哪些,小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
創(chuàng)新互聯(lián)是一家專注于成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)與策劃設(shè)計(jì),峨眉山網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十余年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:峨眉山等地區(qū)。峨眉山做網(wǎng)站價(jià)格咨詢:18980820575問題引入
使用 Angular 進(jìn)行過一段時(shí)間的開發(fā)后,基本上都會(huì)遇到一個(gè)這樣的坑:
{{name}}
把 p
元素和 input
元素綁定同一個(gè)變量,你本以為,在輸入框輸入內(nèi)容,p
中顯示的肯定也是隨之變化的。
然而并不是這樣,不管 input
中的元素怎么變, p
元素中的都沒變化,WTF。
要說這是什么原因,那就要從 Angular 的作用域說起了。
作用域
每個(gè) Angular 應(yīng)用默認(rèn)有一個(gè)根作用域 $rootScope, 根作用域位于最頂層,從它往下掛著各級(jí)作用域。
通常情況下,頁面中 ng-model
綁定的變量都是在對(duì)應(yīng)的 Controller 中定義的。如果一個(gè)變量未在當(dāng)前作用域中定義,JavaScript 會(huì)通過當(dāng)前 Controller 的 prototype 向上查找,也就是作用域的繼承。
這又分兩種情況。
1. 基本類型變量
{{x}}
運(yùn)行后會(huì)發(fā)現(xiàn)跟文章開頭一樣的問題,里面輸入框變了,外面的沒跟著變。
原因在于,InnerCtrl
中并未定義 x
這個(gè)變量,取值的時(shí)候,會(huì)沿著原型鏈向上找,找到了 OuterCtrl
中定義的 x
,然后賦值給自己,在 InnerCtrl
的輸入框輸入值時(shí),改變的是 InnerCtrl
中的 x
,而對(duì) OuterCtrl
中的 x
無影響。此時(shí),兩個(gè) x
是獨(dú)立的。
不過,如果你不嫌麻煩的話,用 $scope.$parent
可以綁定并影響上一層作用域中的基本變量:
2. 引用類型變量
那么,如果上下級(jí)作用域想共用變量怎么辦呢?
答案是使用引用類型變量。
{{x}}
在這種情況下,兩者的 data
是同一個(gè)引用,對(duì)這個(gè)對(duì)象上面的屬性修改,是可以反映到兩級(jí)對(duì)象上的。
ng-if中的作用域
前面講的是兩級(jí)控制器之間的作用域,那跟前面提到的問題有什么關(guān)系呢?那個(gè)看著不是只有一個(gè) Controller 嗎?
其實(shí),并不是只有 Controller 可以創(chuàng)建作用域,ng-if
等指令也會(huì)(隱式地)產(chǎn)生新作用域。
總結(jié)下來就是,ng-if
、 ng-switch
、 ng-include
等會(huì)動(dòng)態(tài)創(chuàng)建一塊界面的東西,都是自帶一級(jí)作用域。
因此,在開發(fā)過程中,為了避免模板中的變量歧義,應(yīng)當(dāng)盡可能使用命名限定,比如 data.x
,出現(xiàn)歧義的可能性就比單獨(dú)的 x
要少得多。
關(guān)于“AngularJS中的作用域有哪些”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,使各位可以學(xué)到更多知識(shí),如果覺得文章不錯(cuò),請(qǐng)把它分享出去讓更多的人看到。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn,海內(nèi)外云服務(wù)器15元起步,三天無理由+7*72小時(shí)售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì),專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。