AngularJS 限定$scope的范圍實(shí)例詳解

發(fā)布時(shí)間：2020-09-10 13:41:59 來源：腳本之家閱讀：150 作者：lqh 欄目：web開發(fā)

限定$scope的范圍

JavaScript基于原型的繼承與面向?qū)ο笾谢陬惖睦^承有著微妙的區(qū)別，這通常不是什么問題，但這個(gè)微妙之處在使用$scope時(shí)就會(huì)表現(xiàn)出來。在AngularJS中，每個(gè)$scope都會(huì)繼承父$scope，最高層稱之為$rootScope。（$scope與傳統(tǒng)指令有些不同，它們有一定的作用范圍i，且只繼承顯式聲明的屬性。）

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

比如說，我們需要在一個(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>

那么問題來了……：在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è)對象，這就會(huì)發(fā)生。（記住，在javascript中，函數(shù)、數(shù)組和對象都是對象）

所以為了獲得預(yù)期的行為，需要在navCtrl中創(chuàng)建一個(gè)對象，它可以被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è)對象，原型鏈就會(huì)起作用，navCtrl模版和$scope和loginCtrl都會(huì)被更新。

這看上去是一個(gè)很做作的例子，但是當(dāng)你使用某些指令去創(chuàng)建子$scope，如ngRepeat時(shí)，這個(gè)問題很容易就會(huì)產(chǎn)生。

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

向AI問一下細(xì)節(jié)

AngularJS 限定$scope的范圍實(shí)例詳解

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽