学习Angular中作用域需要注意的坑

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的心路历程，实在惭愧做了应用部署到生产环境之后才想起来去研究研究内部的原理。