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