Angular作用域
在用angular搭建的網頁應用中，作用域（scope）這個概念是貫穿其中的。在angular的視圖（view）中的很多指令是會創建一個作用域的，例如ng-app ， ng-controller 等。這個作用域就是我們在寫控制器構造函數時注入的$scope （angular1.2之前的版本），他是視圖模型（view model）中的一個概念。我們的數據模型（model）就是定義在作用域中的。
Angular作用域的坑
用過angular的人應該都會經過一個過程，就是剛開始還是小白的時候，剛看見數據雙向綁定覺得很牛逼，
Angular中作用域的坑1
管他三七二十一直接開始用，一頓綁定。綁定完之後，如果你運氣好（懂得angular作用域原理的老鳥無視），那麼雙向綁定就開始如願工作了，這時候我們也覺得自己好厲害，居然可以這麼快就實現“雙向綁定”這個才聽說不久的新功能了。
那麼為什麼上面說雙向綁定是因為運氣好才能正常工作呢？因為新手剛開始學angular的時候，無非就是看教程然後改動其中的代碼實現自己的業務需求，能剛開始就去學習官方文檔的選手就算有也是少數，所以這樣，大多數剛學習angular的朋友實際上不太了解其中的原理，但是覺得自己已經會用了。
好說了這麼多，那我們來看看如果一個新手剛開始給作用域中指定數據模型並且進行雙向綁定時，運氣不那麼好的情況。這種情況下，就會遇到上面說的坑，先來看看代碼
// 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>// javascriptfunction OuterCtrl($scope) { $scope.a = 1;}function InnerCtrl() {}上面的代碼就是一個極其簡單的雙向綁定的例子。頁面加載以後，外部div 和內部div 中都會顯示1。當按了遞增按鈕之後，會發現只有內部的1變成了2，繼續按也是一樣，只有內部的數字會遞增。那麼這時候，新手往往就慌了，說好的神奇的雙向綁定呢？
Angular中作用域的坑2
這個時候寶寶就有點小情緒了， stackoverflow走起，官方文檔走起，最後發現確實有解決方法，比如說將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>// javascriptfunction OuterCtrl($scope) { $scope.data = { a: 1 };}function InnerCtrl() {}然後發現，居然可以工作了，兩個數字都跟著遞增了，我是雙向綁定之王……然後就扔一邊也不管具體的原理繼續學習下一部分教程了。這其實就是我當初學習angular的心路歷程，實在慚愧做了應用部署到生產環境之後才想起來去研究研究內部的原理。
坑總是要填的
廢話說了那麼多，坑也去踩了，下面進入填坑階段，也就是這個坑是為什麼會出現為什麼寫成對象的屬性就能解決。其實知道了原理之後，是很容易理解的。 angular的內外層作用域之間是基於javascript的原型鏈來實現的繼承，並且只使用了原型鏈繼承方法，有點JavaScript基礎的朋友應該就能瞬間反應過來，子類原型對像中的引用類型值和父類實例對像中的引用類型值是引用的同一個，而基本類型值則會覆蓋父類對像中的基本類型值，這其實也是組合繼承存在的原因，因為光用原型鏈繼承會帶來上訴問題，扯得有點遠
總之這裡，我們可以這樣來看待第一個例子：
function OuterCtrl() { this.a = 1;}function InnerCtrl() {}var outer = new OuterCtrl();InnerCtrl.prototype = outer;var inner = new InnerCtrl();inner.a = inner.a + 1;這裡，我們將內部的控制器的構造函數的原型對象設置為外部作用域對象，這樣產生的內部作用域對象就繼承了外部對象outer 中的屬性a 。這個屬性是個基本類型值，對內部對象的屬性a 進行訪問的時候，由於內部對象本身不存在這樣的屬性，就會從它的原型對像中查找，原型對象outer 中存在這樣的屬性，於是返回值，沒有問題，但是如果我們對內部作用域對象的a 屬性賦值的話，問題就出來了。 inner.a = inner.a + 1;這個語句實際上進行了前面說的查找a 屬性值的過程，然後將返回的值賦值給了內部作用域對象的a 屬性，由於a 屬性是不存在的，因此創建了一個a 的基本類型值屬性，屏蔽了外層作用域對象outer 中的a 屬性，這個坑就這麼出來了。
因此，如果我們將基本類型值屬性換成引用類型值屬性的話，問題就能夠得到解決，因為他們兩個對像對應的屬性是引用的同一個引用類型值，不管在哪對它進行修改都會反應在所有引用他的對像上。
總結
以上就是關於Angular中作用域需要注意的坑的全部內容，希望本文的內容對大家學習Angular中的作用域能有所幫助。