学习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 相关文章推荐
用js计算页面执行时间的函数
Dec 07 Javascript
IE8下关于querySelectorAll()的问题
May 13 Javascript
在JavaScript中处理时间之getHours()方法的使用
Jun 10 Javascript
javascript实现网页子页面遍历回调的方法(涉及 window.frames、递归函数、函数上下文)
Jul 27 Javascript
AngularJS基础 ng-list 指令详解及示例代码
Aug 02 Javascript
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
Dec 12 Javascript
微信小程序实现下载进度条的方法
Dec 08 Javascript
vue中引用阿里字体图标的方法
Feb 10 Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
Nov 02 Javascript
解决Layui中layer报错的问题
Sep 03 Javascript
Openlayers实现扩散的动态点(水纹效果)
Aug 17 Javascript
javascript对象3个属性特征
Nov 17 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
浅析php中常量,变量的作用域和生存周期
2013/08/10 PHP
php安装swoole扩展的方法
2015/03/19 PHP
Laravel5.7 Eloquent ORM快速入门详解
2019/04/12 PHP
php慢查询日志和错误日志使用详解
2021/02/27 PHP
Prototype使用指南之base.js
2007/01/10 Javascript
JavaScript将相对地址转换为绝对地址示例代码
2013/07/19 Javascript
Firefox和IE兼容性问题及解决方法总结
2013/10/08 Javascript
jquery实现炫酷的叠加层自动切换特效
2015/02/01 Javascript
深入讲解AngularJS中的自定义指令的使用
2015/06/18 Javascript
如何解决ligerUI布局时Center中的Tab高度大小
2015/11/24 Javascript
js实现简单排列组合的方法
2016/01/27 Javascript
jQuery获取cookie值及删除cookie用法实例
2016/04/15 Javascript
JavaScript实现单英文金山打字通
2020/07/24 Javascript
解决LayUI数据表格复选框不居中显示的问题
2019/09/25 Javascript
js判断浏览器的环境(pc端,移动端,还是微信浏览器)
2020/12/24 Javascript
[52:29]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第三局
2016/03/03 DOTA
Python回调函数用法实例详解
2015/07/02 Python
Python脚本获取操作系统版本信息
2016/12/17 Python
python面向对象实现名片管理系统文件版
2019/04/26 Python
Python自动化之数据驱动让你的脚本简洁10倍【推荐】
2019/06/04 Python
python简单区块链模拟详解
2019/07/03 Python
python腾讯语音合成实现过程解析
2019/08/01 Python
python 三元运算符使用解析
2019/09/16 Python
Django封装交互接口代码
2020/07/12 Python
Python字符串的15个基本操作(小结)
2021/02/03 Python
凯特·丝蓓英国官网:Kate Spade英国
2016/11/07 全球购物
Herve Leger官网:标志性绷带连衣裙等
2018/12/26 全球购物
简单说说tomcat的配置
2013/05/28 面试题
生物制药毕业生自荐信
2013/10/16 职场文书
幼师专业求职推荐信
2013/11/08 职场文书
后勤主管工作职责
2013/12/07 职场文书
上课迟到检讨书
2014/01/19 职场文书
个人诉讼委托书范本
2014/10/17 职场文书
原料仓管员岗位职责
2015/04/01 职场文书
一个独生女的故事观后感
2015/06/04 职场文书
java版 简单三子棋游戏
2022/05/04 Java/Android