AngularJS 限定$scope的范围实例详解


Posted in Javascript onJune 23, 2017

限定$scope的范围

JavaScript基于原型的继承与面向对象中基于类的继承有着微妙的区别,这通常不是什么问题,但这个微妙之处在使用$scope时就会表现出来。在AngularJS中,每个$scope都会继承父$scope,最高层称之为$rootScope。($scope与传统指令有些不同,它们有一定的作用范围i,且只继承显式声明的属性。)

由于原型继承的特点,在父类和子类间共享数据不太重要,不过如果不小心的话,也很容易误用了一个父$scope的属性。

比如说,我们需要在一个导航栏上显示一个用户名,这个用户名是在登录表单中输入的,下面这种尝试应该是能工作的:

<div

ng-controller="navCtrl">

  <span>{{user}}</span>

  <div

ng-controller="loginCtrl">

    <span>{{user}}</span>

    <input

ng-model="user"></input>

  </div>

</div>

那么问题来了……:在text input中设置了user的ng-model,当用户在其中输入内容时,哪个模版会被更新?navCtrl还是loginCtrl,还是都会?

如果你选择了loginCtrl,那么你可能已经理解了原型继承是如何工作的了。

当你检索字面值时,原型链并不起作用。如果navCtrl也同时被更新的话,检索原型链是必须的;但如果值是一个对象,这就会发生。(记住,在javascript中,函数、数组和对象都是对象)

所以为了获得预期的行为,需要在navCtrl中创建一个对象,它可以被loginCtrl引用。

<div
 ng-controller="navCtrl">

  <span>{{user.name}}</span>

  <div
 ng-controller="loginCtrl">

    <span>{{user.name}}</span>

    <input
 ng-model="user.name"></input>

  </div>

</div>

现在,由于user是一个对象,原型链就会起作用,navCtrl模版和$scope和loginCtrl都会被更新。

这看上去是一个很做作的例子,但是当你使用某些指令去创建子$scope,如ngRepeat时,这个问题很容易就会产生。

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
动态加载iframe
Jun 16 Javascript
兼容IE、FireFox、Chrome等浏览器的xml处理函数js代码
Nov 30 Javascript
jquery导航制件jquery鼠标经过变色效果示例
Dec 05 Javascript
jquery中get,post和ajax方法的使用小结
Feb 04 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
Mar 28 Javascript
js实现下拉列表选中某个值的方法(3种方法)
Dec 17 Javascript
拥Bootstrap入怀——导航栏篇
May 30 Javascript
jQuery实现拖动效果的实例代码
Jun 25 jQuery
JS简单实现动态添加HTML标记的方法示例
Apr 08 Javascript
vue单页应用在页面刷新时保留状态数据的方法
Sep 21 Javascript
在vue中使用echarts图表实例代码详解
Oct 22 Javascript
微信小程序class封装http代码实例
Aug 24 Javascript
QRCode.js:基于JQuery的生成二维码JS库的使用
Jun 23 #jQuery
js实现城市级联菜单的2种方法
Jun 23 #Javascript
JS使用正则表达式验证身份证号码
Jun 23 #Javascript
创建简单的node服务器实例(分享)
Jun 23 #Javascript
详解微信小程序 template添加绑定事件
Jun 23 #Javascript
微信小程序 检查接口状态实例详解
Jun 23 #Javascript
20行JS代码实现网页刮刮乐效果
Jun 23 #Javascript
You might like
php日期转时间戳,指定日期转换成时间戳
2012/07/17 PHP
PHP的switch判断语句的“高级”用法详解
2014/10/01 PHP
JQUERY 对象与DOM对象之两者相互间的转换
2009/04/27 Javascript
ymPrompt的doHandler方法来实现获取子窗口返回值的方法
2010/06/25 Javascript
jQuery之尺寸调整组件的深入解析
2013/06/19 Javascript
jQuery获取节点和子节点文本的方法
2014/07/22 Javascript
JQuery中serialize()、serializeArray()和param()方法示例介绍
2014/07/31 Javascript
浅谈类似于(function(){}).call()的js语句
2015/03/30 Javascript
javascript检测flash插件是否被禁用的方法
2016/01/14 Javascript
javascript插件开发的一些感想和心得
2016/02/28 Javascript
原生JS实现的放大镜效果实例代码
2016/10/15 Javascript
Bootstrap栅格系统简单实现代码
2017/03/06 Javascript
BootStrap表单控件之文本域textarea
2017/05/23 Javascript
JavaScript定时器setTimeout()和setInterval()详解
2017/08/18 Javascript
Vue自定义指令使用方法详解
2017/08/21 Javascript
JS实现留言板功能[楼层效果展示]
2017/12/27 Javascript
vue引入js数字小键盘的实现代码
2018/05/14 Javascript
vue 实现强制类型转换 数字类型转为字符串
2019/11/07 Javascript
JavaScript中clientWidth,offsetWidth,scrollWidth的区别
2021/01/25 Javascript
python数组复制拷贝的实现方法
2015/06/09 Python
举例讲解Python设计模式编程中的访问者与观察者模式
2016/01/26 Python
Python 通过URL打开图片实例详解
2017/06/01 Python
代码分析Python地图坐标转换
2018/02/08 Python
pyQT5 实现窗体之间传值的示例
2019/06/20 Python
pycharm 批量修改变量名称的方法
2019/08/01 Python
简单了解python数组的基本操作
2019/11/26 Python
Python获取二维数组的行列数的2种方法
2020/02/11 Python
Python中的整除和取模实例
2020/06/03 Python
Python unittest如何生成HTMLTestRunner模块
2020/09/08 Python
Python实现我的世界小游戏源代码
2021/03/02 Python
有关HTML5 Video对象的ontimeupdate事件(Chrome上无效)的问题
2013/07/19 HTML / CSS
元旦联欢会感言
2014/03/04 职场文书
毕业生实习证明
2014/09/19 职场文书
企业党的群众路线教育实践活动学习心得体会
2014/10/31 职场文书
2015年试用期自我评价范文
2015/03/10 职场文书
详解python的异常捕获
2022/03/03 Python