限定$scope的范圍

JavaScript基于原型的繼承與面向對象中基于類的繼承有著微妙的區別，這通常不是什么問題，但這個微妙之處在使用$scope時就會表現出來。在AngularJS中，每個$scope都會繼承父$scope，最高層稱之為$rootScope。（$scope與傳統指令有些不同，它們有一定的作用范圍i，且只繼承顯式聲明的屬性。）

由于原型繼承的特點，在父類和子類間共享數據不太重要，不過如果不小心的話，也很容易誤用了一個父$scope的屬性。

比如說，我們需要在一個導航欄上顯示一個用戶名，這個用戶名是在登錄表單中輸入的，下面這種嘗試應該是能工作的：

<divng-controller="navCtrl">  <span>{{user}}</span>  <divng-controller="loginCtrl">    <span>{{user}}</span>    <inputng-model="user"></input>  </div></div>

那么問題來了……：在text input中設置了user的ng-model，當用戶在其中輸入內容時，哪個模版會被更新？navCtrl還是loginCtrl，還是都會？

如果你選擇了loginCtrl，那么你可能已經理解了原型繼承是如何工作的了。

當你檢索字面值時，原型鏈并不起作用。如果navCtrl也同時被更新的話，檢索原型鏈是必須的；但如果值是一個對象，這就會發生。（記住，在javascript中，函數、數組和對象都是對象）

所以為了獲得預期的行為，需要在navCtrl中創建一個對象，它可以被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都會被更新。

這看上去是一個很做作的例子，但是當你使用某些指令去創建子$scope，如ngRepeat時，這個問題很容易就會產生。

感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！