AngularJS 限定$scope的范圍實(shí)例詳解
限定$scope的范圍
JavaScript基于原型的繼承與面向?qū)ο笾谢陬惖睦^承有著微妙的區(qū)別，這通常不是什么問(wèn)題，但這個(gè)微妙之處在使用$scope時(shí)就會(huì)表現(xiàn)出來(lái)。在AngularJS中，每個(gè)$scope都會(huì)繼承父$scope，最高層稱之為$rootScope。（$scope與傳統(tǒng)指令有些不同，它們有一定的作用范圍i，且只繼承顯式聲明的屬性。）
由于原型繼承的特點(diǎn)，在父類和子類間共享數(shù)據(jù)不太重要，不過(guò)如果不小心的話，也很容易誤用了一個(gè)父$scope的屬性。
比如說(shuō)，我們需要在一個(gè)導(dǎo)航欄上顯示一個(gè)用戶名，這個(gè)用戶名是在登錄表單中輸入的，下面這種嘗試應(yīng)該是能工作的：
<div
ng-controller="navCtrl">
<span>{{user}}</span>
<div
ng-controller="loginCtrl">
<span>{{user}}</span>
<input
ng-model="user"></input>
</div>
</div>
那么問(wèn)題來(lái)了……：在text input中設(shè)置了user的ng-model，當(dāng)用戶在其中輸入內(nèi)容時(shí)，哪個(gè)模版會(huì)被更新？navCtrl還是loginCtrl，還是都會(huì)？
如果你選擇了loginCtrl，那么你可能已經(jīng)理解了原型繼承是如何工作的了。
當(dāng)你檢索字面值時(shí)，原型鏈并不起作用。如果navCtrl也同時(shí)被更新的話，檢索原型鏈?zhǔn)潜仨毜?；但如果值是一個(gè)對(duì)象，這就會(huì)發(fā)生。（記住，在javascript中，函數(shù)、數(shù)組和對(duì)象都是對(duì)象）
所以為了獲得預(yù)期的行為，需要在navCtrl中創(chuàng)建一個(gè)對(duì)象，它可以被loginCtrl引用。
<div
ng-controller="navCtrl">
<span>{{user.name}}</span>
<div
ng-controller="loginCtrl">
<span>{{user.name}}</span>
<input
ng-model="user.name"></input>
</div>
</div>
現(xiàn)在，由于user是一個(gè)對(duì)象，原型鏈就會(huì)起作用，navCtrl模版和$scope和loginCtrl都會(huì)被更新。
這看上去是一個(gè)很做作的例子，但是當(dāng)你使用某些指令去創(chuàng)建子$scope，如ngRepeat時(shí)，這個(gè)問(wèn)題很容易就會(huì)產(chǎn)生。
感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！
相關(guān)文章
實(shí)例剖析AngularJS框架中數(shù)據(jù)的雙向綁定運(yùn)用
這篇文章主要介紹了AngularJS框架中數(shù)據(jù)的雙向綁定運(yùn)用實(shí)例,包括數(shù)據(jù)綁定中的關(guān)鍵函數(shù)與監(jiān)聽器觸發(fā)的相關(guān)講解,需要的朋友可以參考下2016-03-03
Angular2.0/4.0 使用Echarts圖表的示例代碼
本篇文章主要介紹了Angular2.0/4.0 使用Echarts的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
Angularjs 動(dòng)態(tài)改變title標(biāo)題(兼容ios)
這篇文章主要介紹了 Angularjs 動(dòng)態(tài)改變title標(biāo)題(兼容ios)的相關(guān)資料,需要的朋友可以參考下2016-12-12
Angular中ng-template和ng-container的應(yīng)用小結(jié)
Angular的日常工作中經(jīng)常會(huì)使用到ng-template和ng-container，本文對(duì)他們做一個(gè)總結(jié),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2022-06-06
AngularJS遞歸指令實(shí)現(xiàn)Tree View效果示例
這篇文章主要介紹了AngularJS遞歸指令實(shí)現(xiàn)Tree View效果,結(jié)合實(shí)例形式分析了AngularJS基于遞歸指令實(shí)現(xiàn)樹形結(jié)構(gòu)層次數(shù)據(jù)的相關(guān)操作步驟與注意事項(xiàng),需要的朋友可以參考下2016-11-11
angular6.x中ngTemplateOutlet指令的使用示例
本篇文章主要介紹了angular6.x中ngTemplateOutlet指令的使用示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
AngularJS利用Controller完成URL跳轉(zhuǎn)
本文的主要內(nèi)容是介紹在AngularJS中怎樣利用Controller實(shí)現(xiàn)URL跳轉(zhuǎn)，本文給出了實(shí)例代碼，簡(jiǎn)單明了，有需要的可以參考學(xué)習(xí)。2016-08-08
這篇文章主要介紹了angular2中Http請(qǐng)求原理與用法,結(jié)合實(shí)例形式分析了AngularJS中http相關(guān)模塊實(shí)現(xiàn)http服務(wù)請(qǐng)求與相應(yīng)的相關(guān)操作技巧,需要的朋友可以參考下2018-01-01
本篇文章主要介紹了如何在Angular2中使用jQuery及其插件的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02
使用angularjs.foreach時(shí)return的問(wèn)題解決
這篇文章主要介紹了使用angularjs.foreach時(shí)return的問(wèn)題解決，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09