博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Angular-限定$scope的范围
阅读量:5954 次
发布时间:2019-06-19

本文共 1039 字,大约阅读时间需要 3 分钟。

hot3.png

        javascript基于原型的继承和面向对象中基于类的继承有那么些微妙的区别,这通常不会有什么大问题,但是这个文彪的区别在angular中使用$scope的时候会表现出来。在angular中,数据都有自己的作用域,在控制器中将数据存放在$scope上,在view中进行访问或者修改(仍然在该控制器中),而每个$scope都会继承父级的$scope,一直往上,知道最顶层的$rootScope($scope和传统的指令不同,$scope有一定的作用范围,即在自己所在的控制器范围内进行操作,并且只继承显式声明的属性)。

        javascript原型继承的特点使得在父类和子类中共享数据变的不那么重要,但是在angular中,由于限定了$scope的作用范围,一不小心,也会很容易误用父级$scope中的属性,这并不是我们想看到的!

        举一个很简单的例子,假设我们要在一个div中显示用户名,这个用户名在登录表单中进行输入,来看下简单的demo:

153453_SPVM_583858.png

        根据demo可以看出,我们在父控制器设置了一个user,子控制器中继承父类的user,在text input 中设置了user的ng-model,尝试想一下,当我们在输入框中输入的时候,parentCtrl控制器和childCtrl控制器的内容哪个会被更新?parentCtrl或者是childCtrl?还是两个都会?

        如果你选择了childCtrl,那么你基本是已经理解了原型继承是如何进行工作的了,如果你还有其他的答案的话,同学,可能你还要多学习学习了。让我们来看看测试结果:

153515_0oIh_583858.png

        当我们在检索值类型的时候,原型链是不会起作用的,所以我们在输入框输入内容的时候,只会更新当前所在的控制器中的user,如果我们想要parentCtrl中的user的话,那就说明势必要触发原型链的检索!那么用什么办法来解决呢?使用对象来解决(在javascript中,函数、数组、对象都是对象)。让我们再来写一个demo,不同的是,这次使用的是对象,而非值。

153548_xaew_583858.png

        那么这次在input中进行输入,结果会如何?

153610_eQWQ_583858.png

        这次,由于user是一个对象,因此原型链会起作用,parentCtrl和childCtrl中的内容都会被更新!

        好吧,我承认这是一个很作的例子,但是当你使用某些个指令去创建子$scope的时候,稍微不注意,这样的问题就会很容易产生(例如ngRepeat指令)!        

转载于:https://my.oschina.net/meichao/blog/540935

你可能感兴趣的文章
完美解决html中select的option不能隐藏的问题。
查看>>
推荐5大开源工具,用于开发Kubernetes项目
查看>>
制定2015年的移动开发策略
查看>>
JPA 2.2改进了易用性
查看>>
从蚂蚁金服实践入手,带你深入了解 Service Mesh
查看>>
24周年,“常青树”Delphi发布新版本10.3.1
查看>>
7. 从数据库获取数据- 从零开始学Laravel
查看>>
阿里百川码力APP监控 来了!
查看>>
使用dotenv管理环境变量
查看>>
温故js系列(11)-BOM
查看>>
Vuex学习
查看>>
bootstrap - navbar
查看>>
切图崽的自我修养-[ES6] 编程风格规范
查看>>
[React Native Android 安利系列]样式与布局的书写
查看>>
利用dxflib读写cad文件
查看>>
服务器迁移小记
查看>>
FastDFS存储服务器部署
查看>>
Android — 创建和修改 Fragment 的方法及相关注意事项
查看>>
流程控制: jQ Deferred 与 ES6 Promise 使用新手向入坑!
查看>>
swift基础之_swift调用OC/OC调用swift
查看>>