Angular作用域

在用angular搭建的網(wǎng)頁應用中，作用域（scope）這個概念是貫穿其中的。在angular的視圖（view）中的很多指令是會創(chuàng)建一個作用域的，例如 ng-app ， ng-controller 等。這個作用域就是我們在寫控制器構造函數(shù)時注入的 $scope （angular1.2之前的版本），他是視圖模型（view model）中的一個概念。我們的數(shù)據(jù)模型（model）就是定義在作用域中的。

Angular作用域的坑

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

Angular中作用域的坑1

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

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

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

// 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() {}

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

Angular中作用域的坑2

這個時候?qū)殞毦陀悬c小情緒了，stackoverflow走起，官方文檔走起，最后發(fā)現(xiàn)確實有解決方法，比如說將 a 寫成一個對象的屬性 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)，居然可以工作了，兩個數(shù)字都跟著遞增了，我是雙向綁定之王……然后就扔一邊也不管具體的原理繼續(xù)學習下一部分教程了。這其實就是我當初學習angular的心路歷程，實在慚愧做了應用部署到生產(chǎn)環(huán)境之后才想起來去研究研究內(nèi)部的原理。

坑總是要填的

廢話說了那么多，坑也去踩了，下面進入填坑階段，也就是這個坑是為什么會出現(xiàn)為什么寫成對象的屬性就能解決。其實知道了原理之后，是很容易理解的。angular的內(nèi)外層作用域之間是基于javascript的原型鏈來實現(xiàn)的繼承，并且只使用了原型鏈繼承方法，有點JavaScript基礎的朋友應該就能瞬間反應過來，子類原型對象中的引用類型值和父類實例對象中的引用類型值是引用的同一個，而基本類型值則會覆蓋父類對象中的基本類型值，這其實也是組合繼承存在的原因，因為光用原型鏈繼承會帶來上訴問題，扯得有點遠

總之這里，我們可以這樣來看待第一個例子：

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

因此，如果我們將基本類型值屬性換成引用類型值屬性的話，問題就能夠得到解決，因為他們兩個對象對應的屬性是引用的同一個引用類型值，不管在哪對它進行修改都會反應在所有引用他的對象上。

總結

以上就是關于Angular中作用域需要注意的坑的全部內(nèi)容，希望本文的內(nèi)容對大家學習Angular中的作用域能有所幫助。

最新評論