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 相关文章推荐
JQuery this 和 $(this) 的区别
Aug 23 Javascript
使用jQuery模板来展现json数据的代码
Oct 22 Javascript
浅析JavaScript中的常用算法与函数
Nov 21 Javascript
jquery中的on方法使用介绍
Dec 29 Javascript
js或jquery实现页面打印可局部打印
Mar 27 Javascript
基于jQuery实现点击弹出层实例代码
Jan 01 Javascript
Node.js的基本知识简单汇总
Sep 19 Javascript
js利用clipboardData实现截屏粘贴功能
Oct 12 Javascript
微信小程序 devtool隐藏的秘密
Jan 21 Javascript
js的继承方法小结(prototype、call、apply)(推荐)
Apr 17 Javascript
一次让你了解全部JavaScript的作用域
Jun 24 Javascript
JavaScript的变量声明与声明提前用法实例分析
Nov 26 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
使用 eAccelerator加速PHP代码的目的
2007/03/16 PHP
linux系统上支持php的 iconv()函数的方法
2011/10/01 PHP
thinkPHP3.2.3结合Laypage实现的分页功能示例
2018/05/28 PHP
filemanage功能中用到的common.js
2007/04/08 Javascript
Javascript 闭包引起的IE内存泄露分析
2012/05/23 Javascript
js 通用订单代码
2013/12/23 Javascript
Backbone.js中的集合详解
2015/01/14 Javascript
跟我学习javascript的执行上下文
2015/11/18 Javascript
解决jquery插件:TypeError:$.browser is undefined报错的方法
2015/11/21 Javascript
jquery实现静态搜索功能(可输入搜索文字)
2017/03/28 jQuery
AngularJS双向绑定和依赖反转实例详解
2017/04/15 Javascript
基于angular实现三级联动的生日插件
2017/05/12 Javascript
js禁止表单重复提交
2017/08/29 Javascript
webpack学习教程之前端性能优化总结
2017/12/05 Javascript
Angular6笔记之封装http的示例代码
2018/07/27 Javascript
微信小程序实现的五星评价功能示例
2019/04/25 Javascript
Vue组件为什么data必须是一个函数
2020/06/11 Javascript
[08:06]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant 选手采访
2021/03/11 DOTA
从零学Python之入门(二)基本数据类型
2014/05/25 Python
Python 使用os.remove删除文件夹时报错的解决方法
2017/01/13 Python
如何用itertools解决无序排列组合的问题
2017/05/18 Python
在Python中pandas.DataFrame重置索引名称的实例
2018/11/06 Python
Python使用reportlab模块生成PDF格式的文档
2019/03/11 Python
python按键按住不放持续响应的实例代码
2019/07/17 Python
用Python爬取QQ音乐评论并制成词云图的实例
2019/08/24 Python
Python使用uuid库生成唯一标识ID
2020/02/12 Python
python如何实现word批量转HTML
2020/09/30 Python
Python中Qslider控件实操详解
2021/02/20 Python
python 实现网易邮箱邮件阅读和删除的辅助小脚本
2021/03/01 Python
新年晚会主持词
2014/03/24 职场文书
任命书范本大全
2014/06/06 职场文书
简易版租房协议书范本
2014/10/13 职场文书
第一军规观后感
2015/06/12 职场文书
慰问信的写作格式及范文!
2019/06/24 职场文书
MyBatis配置文件解析与MyBatis实例演示
2022/04/07 Java/Android
基于CSS制作创意端午节专属加载特效
2022/06/01 HTML / CSS