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 相关文章推荐
Javascript 阻止javascript事件冒泡,获取控件ID值
Jun 27 Javascript
一个支付页面DEMO附截图
Jul 22 Javascript
js实现页面跳转的几种方法小结
May 16 Javascript
jQuery插件扩展测试实例
Jun 21 Javascript
针对BootStrap中tabs控件的美化和完善(推荐)
Jul 06 Javascript
KnockoutJS 3.X API 第四章之表单value绑定
Oct 10 Javascript
全面介绍vue 全家桶和项目实例
Dec 27 Javascript
VueJs监听window.resize方法示例
Jan 17 Javascript
webpack 模块热替换原理
Apr 09 Javascript
详解ESLint在Vue中的使用小结
Oct 15 Javascript
Vue打包后访问静态资源路径问题
Nov 08 Javascript
微信小程序连接服务器展示MQTT数据信息的实现
Jul 14 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 5.4 你必须要知道的
2013/08/07 PHP
php随机抽奖实例分析
2015/03/04 PHP
PHP对象链式操作实现原理分析
2016/10/09 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
[原创]静态页面也可以实现预览 列表不同的显示方式
2006/10/14 Javascript
[原创]保存的js无法执行的解决办法
2007/02/25 Javascript
javascript显示隐藏层比较不错的方法分析
2008/09/30 Javascript
JQuery基础语法小结
2015/02/27 Javascript
javascript实现 百度翻译 可折叠的分享按钮列表
2015/03/12 Javascript
详解Javacript和AngularJS中的Promises
2016/02/09 Javascript
非常实用的js验证框架实现源码 附原理方法
2016/06/08 Javascript
JavaScript中removeChild 方法开发示例代码
2016/08/15 Javascript
AngularJS入门教程之XHR和依赖注入详解
2016/08/18 Javascript
JS button按钮实现submit按钮提交效果
2016/11/01 Javascript
AngularJS的ng-repeat指令与scope继承关系实例详解
2017/01/21 Javascript
Javascript实现登录记住用户名和密码功能
2017/03/22 Javascript
vue.js获取数据库数据实例代码
2017/05/26 Javascript
微信小程序自定义弹出层效果
2020/05/26 Javascript
python进程管理工具supervisor使用实例
2014/09/17 Python
python字典键值对的添加和遍历方法
2016/09/11 Python
使用 Python 实现文件递归遍历的三种方式
2018/07/18 Python
python给微信好友定时推送消息的示例
2019/02/20 Python
详解Python odoo中嵌入html简单的分页功能
2019/05/29 Python
Python实现的北京积分落户数据分析示例
2020/03/27 Python
详解CSS3新增的背景属性
2019/12/25 HTML / CSS
美国中小型企业领先的办公家具供应商:Office Designs
2016/11/26 全球购物
BIBLOO波兰:捷克的一家在线服装店
2018/03/09 全球购物
Paper Cape官网:美国婴儿和儿童服装品牌
2019/11/02 全球购物
匡威俄罗斯官网:Converse俄罗斯
2020/05/09 全球购物
在数据文件自动增长时,自动增长是否会阻塞对文件的更新
2014/05/01 面试题
会计专业求职信范文
2014/03/16 职场文书
公司请假条格式
2014/04/11 职场文书
法人委托书范本
2014/09/15 职场文书
“四风”问题整改措施和努力方向
2014/09/20 职场文书
国庆65周年演讲稿:回首往昔,展望未来
2014/09/21 职场文书
JavaScript函数柯里化
2021/11/07 Javascript