学习Angular中作用域需要注意的坑  更新时间:2016年08月17日 11:41:56   投稿:daisy   这篇文章记录了当时刚学习angular的时候踩的关于作用域的坑,希望给以后学习Angular作用域的朋友一个提醒,有需要的可以参考学习。 Angular作用域 在用angular搭建的网页应用中,作用域(scope)这个概念是贯穿其中的。在angular的视图(view)中的很多指令是会创建一个作用域的,例如 ng-app , ng-controller 等。这个作用域就是我们在写控制器构造函数时注入的 $scope (angular1.2之前的版本),他是视图模型(view model)中的一个概念。我们的数据模型(model)就是定义在作用域中的。 Angular作用域的坑 用过angular的人应该都会经过一个过程,就是刚开始还是小白的时候,刚看见数据双向绑定觉得很牛逼, Angular中作用域的坑1 管他三七二十一直接开始用,一顿绑定。绑定完之后,如果你运气好(懂得angular作用域原理的老鸟无视),那么双向绑定就开始如愿工作了,这时候我们也觉得自己好厉害,居然可以这么快就实现“双向绑定”这个才听说不久的新功能了。 那么为什么上面说双向绑定是因为运气好才能正常工作呢?因为新手刚开始学angular的时候,无非就是看教程然后改动其中的代码实现自己的业务需求,能刚开始就去学习官方文档的选手就算有也是少数,所以这样,大多数刚学习angular的朋友实际上不太了解其中的原理,但是觉得自己已经会用了。 好说了这么多,那我们来看看如果一个新手刚开始给作用域中指定数据模型并且进行双向绑定时,运气不那么好的情况。这种情况下,就会遇到上面说的坑,先来看看代码 // html 递增 // javascript function OuterCtrl($scope) { $scope.a = 1; } function InnerCtrl() {} 上面的代码就是一个极其简单的双向绑定的例子。页面加载以后,外部 div 和内部 div 中都会显示1。当按了递增按钮之后,会发现只有内部的1变成了2,继续按也是一样,只有内部的数字会递增。那么这时候,新手往往就慌了,说好的神奇的双向绑定呢? Angular中作用域的坑2 这个时候宝宝就有点小情绪了,stackoverflow走起,官方文档走起,最后发现确实有解决方法,比如说将 a 写成一个对象的属性 data.a : // html 递增 // 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中的作用域能有所帮助。 您可能感兴趣的文章: AngularJs学习第五篇从Controller控制器谈谈$scope作用域 浅谈angularJS 作用域 关于angularJs指令的Scope(作用域)介绍 详解AngularJS中的作用域 详解JavaScript的AngularJS框架中的作用域与数据绑定 AngularJS入门教程之Scope(作用域) AngularJS 作用域详解及示例代码 Angular.Js之Scope作用域的学习教程 详解angular中的作用域及继承 angularjs 作用域 相关文章 AngularJs bootstrap搭载前台框架——js控制部分 本文主要介绍AngularJs bootstrap搭载前台框架js控制部分的资料,这里有实现代码,有兴趣的小伙伴可以参考下 2016-09-09 Angular5中调用第三方js插件的方法 下面小编就为大家分享一篇Angular5中调用第三方js插件的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2018-02-02 AngularJS动态菜单操作指令 在我们创建一个angularJS应用的时候,菜单往往往是不可或缺的元素之一。接下来通过本文给大家介绍AngularJS动态菜单操作指令,感兴趣的朋友一起学习吧 2017-04-04 angularJs中orderBy筛选以及filter过滤数据的方法 今天小编就为大家分享一篇angularJs中orderBy筛选以及filter过滤数据的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2018-09-09 详解angularJS+Ionic移动端图片上传的解决办法 本篇文章主要介绍了详解angularJS+Ionic移动端图片上传的解决办法 ,具有一定的参考价值,有需要的可以了解一下 2017-09-09 Angular-UI Bootstrap组件实现警报功能 这篇文章主要介绍了Angular-UI Bootstrap组件实现警报功能,对Angular.js services的学习有所帮助,需要的朋友可以参考下 2018-07-07 详解angularjs实现echart图表效果最简洁教程 本篇文章主要介绍了详解angularjs实现echart图表效果最简洁教程,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-11-11 详解webpack+es6+angular1.x项目构建 这篇文章主要介绍了详解webpack+es6+angular1.x项目构建, 小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-05-05 angular4自定义组件非input元素实现ngModel双向数据绑定的方法 这篇文章主要介绍了angular4自定义组件非input元素实现ngModel双向数据绑定的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-12-12 angular组件间传值测试的方法详解 这篇文章主要给大家介绍了关于如何测试angular组件间传值的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用angular组件具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧 2020-05-05 最新评论

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

您可能感兴趣的文章:

  • AngularJs学习第五篇从Controller控制器谈谈$scope作用域
  • 浅谈angularJS 作用域
  • 关于angularJs指令的Scope(作用域)介绍
  • 详解AngularJS中的作用域
  • 详解JavaScript的AngularJS框架中的作用域与数据绑定
  • AngularJS入门教程之Scope(作用域)
  • AngularJS 作用域详解及示例代码
  • Angular.Js之Scope作用域的学习教程
  • 详解angular中的作用域及继承
张贴在3