Angular作用域

在用angular搭建的網(wǎng)頁(yè)應(yīng)用中，作用域（scope）這個(gè)概念是貫穿其中的。在angular的視圖（view）中的很多指令是會(huì)創(chuàng)建一個(gè)作用域的，例如 ng-app ， ng-controller 等。這個(gè)作用域就是我們?cè)趯懣刂破鳂?gòu)造函數(shù)時(shí)注入的 $scope （angular1.2之前的版本），他是視圖模型（view model）中的一個(gè)概念。我們的數(shù)據(jù)模型（model）就是定義在作用域中的。

Angular作用域的坑

用過(guò)angular的人應(yīng)該都會(huì)經(jīng)過(guò)一個(gè)過(guò)程，就是剛開始還是小白的時(shí)候，剛看見數(shù)據(jù)雙向綁定覺(jué)得很牛逼，

Angular中作用域的坑1

管他三七二十一直接開始用，一頓綁定。綁定完之后，如果你運(yùn)氣好（懂得angular作用域原理的老鳥無(wú)視），那么雙向綁定就開始如愿工作了，這時(shí)候我們也覺(jué)得自己好厲害，居然可以這么快就實(shí)現(xiàn)“雙向綁定”這個(gè)才聽說(shuō)不久的新功能了。

那么為什么上面說(shuō)雙向綁定是因?yàn)檫\(yùn)氣好才能正常工作呢？因?yàn)樾率謩傞_始學(xué)angular的時(shí)候，無(wú)非就是看教程然后改動(dòng)其中的代碼實(shí)現(xiàn)自己的業(yè)務(wù)需求，能剛開始就去學(xué)習(xí)官方文檔的選手就算有也是少數(shù)，所以這樣，大多數(shù)剛學(xué)習(xí)angular的朋友實(shí)際上不太了解其中的原理，但是覺(jué)得自己已經(jīng)會(huì)用了。

好說(shuō)了這么多，那我們來(lái)看看如果一個(gè)新手剛開始給作用域中指定數(shù)據(jù)模型并且進(jìn)行雙向綁定時(shí)，運(yùn)氣不那么好的情況。這種情況下，就會(huì)遇到上面說(shuō)的坑，先來(lái)看看代碼

// html
<div ng-controller="OuterCtrl">
  <span ng-bind="a"></span>
  <div ng-controller="InnerCtrl">
    <span ng-bind="a"></span>
    <button ng-click="a=a+1">遞增</button>
  </div>
</div>

// javascript
function OuterCtrl($scope) {
  $scope.a = 1;
}
function InnerCtrl() {}

上面的代碼就是一個(gè)極其簡(jiǎn)單的雙向綁定的例子。頁(yè)面加載以后，外部 div 和內(nèi)部 div 中都會(huì)顯示1。當(dāng)按了遞增按鈕之后，會(huì)發(fā)現(xiàn)只有內(nèi)部的1變成了2，繼續(xù)按也是一樣，只有內(nèi)部的數(shù)字會(huì)遞增。那么這時(shí)候，新手往往就慌了，說(shuō)好的神奇的雙向綁定呢？

Angular中作用域的坑2

這個(gè)時(shí)候?qū)殞毦陀悬c(diǎn)小情緒了，stackoverflow走起，官方文檔走起，最后發(fā)現(xiàn)確實(shí)有解決方法，比如說(shuō)將 a 寫成一個(gè)對(duì)象的屬性 data.a ：

// html
<div ng-controller="OuterCtrl">
  <span ng-bind="data.a"></span>
  <div ng-controller="InnerCtrl">
    <span ng-bind="data.a"></span>
    <button ng-click="data.a=data.a+1">遞增</button>
  </div>
</div>

// javascript
function OuterCtrl($scope) {
  $scope.data = {
    a: 1
  };
}
function InnerCtrl() {}

然后發(fā)現(xiàn)，居然可以工作了，兩個(gè)數(shù)字都跟著遞增了，我是雙向綁定之王……然后就扔一邊也不管具體的原理繼續(xù)學(xué)習(xí)下一部分教程了。這其實(shí)就是我當(dāng)初學(xué)習(xí)angular的心路歷程，實(shí)在慚愧做了應(yīng)用部署到生產(chǎn)環(huán)境之后才想起來(lái)去研究研究?jī)?nèi)部的原理。

坑總是要填的

廢話說(shuō)了那么多，坑也去踩了，下面進(jìn)入填坑階段，也就是這個(gè)坑是為什么會(huì)出現(xiàn)為什么寫成對(duì)象的屬性就能解決。其實(shí)知道了原理之后，是很容易理解的。angular的內(nèi)外層作用域之間是基于javascript的原型鏈來(lái)實(shí)現(xiàn)的繼承，并且只使用了原型鏈繼承方法，有點(diǎn)JavaScript基礎(chǔ)的朋友應(yīng)該就能瞬間反應(yīng)過(guò)來(lái)，子類原型對(duì)象中的引用類型值和父類實(shí)例對(duì)象中的引用類型值是引用的同一個(gè)，而基本類型值則會(huì)覆蓋父類對(duì)象中的基本類型值，這其實(shí)也是組合繼承存在的原因，因?yàn)楣庥迷玩溊^承會(huì)帶來(lái)上訴問(wèn)題，扯得有點(diǎn)遠(yuǎn)

總之這里，我們可以這樣來(lái)看待第一個(gè)例子：

function OuterCtrl() {
  this.a = 1;
}
function InnerCtrl() {}

var outer = new OuterCtrl();
InnerCtrl.prototype = outer;
var inner = new InnerCtrl();
inner.a = inner.a + 1;

這里，我們將內(nèi)部的控制器的構(gòu)造函數(shù)的原型對(duì)象設(shè)置為外部作用域?qū)ο螅@樣產(chǎn)生的內(nèi)部作用域?qū)ο缶屠^承了外部對(duì)象 outer 中的屬性 a 。這個(gè)屬性是個(gè)基本類型值，對(duì)內(nèi)部對(duì)象的屬性 a 進(jìn)行訪問(wèn)的時(shí)候，由于內(nèi)部對(duì)象本身不存在這樣的屬性，就會(huì)從它的原型對(duì)象中查找，原型對(duì)象 outer 中存在這樣的屬性，于是返回值，沒(méi)有問(wèn)題，但是如果我們對(duì)內(nèi)部作用域?qū)ο蟮?a 屬性賦值的話，問(wèn)題就出來(lái)了。 inner.a = inner.a + 1; 這個(gè)語(yǔ)句實(shí)際上進(jìn)行了前面說(shuō)的查找 a 屬性值的過(guò)程，然后將返回的值賦值給了內(nèi)部作用域?qū)ο蟮?a 屬性，由于 a 屬性是不存在的，因此創(chuàng)建了一個(gè) a 的基本類型值屬性，屏蔽了外層作用域?qū)ο?outer 中的 a 屬性，這個(gè)坑就這么出來(lái)了。

因此，如果我們將基本類型值屬性換成引用類型值屬性的話，問(wèn)題就能夠得到解決，因?yàn)樗麄儍蓚€(gè)對(duì)象對(duì)應(yīng)的屬性是引用的同一個(gè)引用類型值，不管在哪對(duì)它進(jìn)行修改都會(huì)反應(yīng)在所有引用他的對(duì)象上。

總結(jié)

以上就是關(guān)于Angular中作用域需要注意的坑的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家學(xué)習(xí)Angular中的作用域能有所幫助。

最新評(píng)論