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


Posted in Javascript onAugust 17, 2016

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>

// javascript
function 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>

// javascript
function 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中的作用域能有所帮助。

Javascript 相关文章推荐
javascript 图片裁剪技巧解读
Nov 15 Javascript
js弹出窗口之弹出层的小例子
Jun 17 Javascript
jquery通过select列表选择框对表格数据进行过滤示例
May 07 Javascript
JS使用cookie实现DIV提示框只显示一次的方法
Nov 05 Javascript
基于JavaScript操作DOM常用的API小结
Dec 01 Javascript
js实现文字滚动效果
Mar 03 Javascript
JS中setTimeout和setInterval的最大延时值详解
Feb 13 Javascript
bootstarp modal框居中显示的实现代码
Feb 18 Javascript
原生JavaScript实现Tooltip浮动提示框特效
Mar 07 Javascript
解决vue.js在编写过程中出现空格不规范报错的问题
Sep 20 Javascript
JS控制下拉列表左右选择实例代码
May 08 Javascript
使用Vant完成Dialog弹框案例
Nov 11 Javascript
js enter键激发事件实例代码
Aug 17 #Javascript
jquery过滤特殊字符',防sql注入的实现方法
Aug 17 #Javascript
js替换字符串中所有指定的字符(实现代码)
Aug 17 #Javascript
在javascript中使用com组件的简单实现方法
Aug 17 #Javascript
模拟javascript中的sort排序(简单实例)
Aug 17 #Javascript
js replace(a,b)之替换字符串中所有指定字符的方法
Aug 17 #Javascript
BOM系列第一篇之定时器setTimeout和setInterval
Aug 17 #Javascript
You might like
Linux下PHP安装mcrypt扩展模块笔记
2014/09/10 PHP
php5.3提示Function ereg() is deprecated Error问题解决方法
2014/11/12 PHP
thinkPHP中多维数组的遍历方法
2016/01/09 PHP
php生成Android客户端扫描可登录的二维码
2016/05/13 PHP
js FLASH幻灯片字符串中有连接符&的处理方法
2012/03/01 Javascript
NodeJS的模块写法入门(实例代码)
2012/03/07 NodeJs
javascript打印大全(打印页面设置/打印预览代码)
2013/03/29 Javascript
JQuery中DOM事件绑定用法详解
2015/06/13 Javascript
浅谈JavaScript中setInterval和setTimeout的使用问题
2015/08/01 Javascript
JS实现自动变化的导航菜单效果代码
2015/09/09 Javascript
jQuery对html元素的取值与赋值实例详解
2015/12/18 Javascript
JS实现向iframe中表单传值的方法
2017/03/24 Javascript
webpack4的迁移的使用方法
2018/05/25 Javascript
jQuery无冲突模式详解
2019/01/17 jQuery
解决layui数据表格Date日期格式的回显Object的问题
2019/09/19 Javascript
详解JavaScript 的执行机制
2020/09/18 Javascript
python通过BF算法实现关键词匹配的方法
2015/03/13 Python
Python 类与元类的深度挖掘 I【经验】
2016/05/06 Python
对python mayavi三维绘图的实现详解
2019/01/08 Python
浅谈Pandas Series 和 Numpy array中的相同点
2019/06/28 Python
Python中一个for循环循环多个变量的示例
2019/07/16 Python
节日快乐! Python画一棵圣诞树送给你
2019/12/24 Python
Python Opencv 通过轨迹(跟踪)栏实现更改整张图像的背景颜色
2020/03/09 Python
Python-jenkins 获取job构建信息方式
2020/05/12 Python
jupyter notebook的安装与使用详解
2020/05/18 Python
python可视化 matplotlib画图使用colorbar工具自定义颜色
2020/12/07 Python
Python LMDB库的使用示例
2021/02/14 Python
固特异美国在线轮胎店:Goodyear Tire
2019/02/23 全球购物
利用promise及参数解构封装ajax请求的方法
2021/03/24 Javascript
优秀求职自荐信怎样写
2013/12/18 职场文书
社区端午节活动总结
2015/02/11 职场文书
大学学生会主席竞选稿
2015/11/19 职场文书
《夸父追日》教学反思
2016/02/20 职场文书
Java 在生活中的 10 大应用
2021/11/02 Java/Android
与Windows10相比Windows11有哪些改进?值不值得升级?
2021/11/21 数码科技
postgresql中如何执行sql文件
2023/05/08 PostgreSQL