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 相关文章推荐
js 分栏效果实现代码
Aug 29 Javascript
jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件
Mar 01 Javascript
js中一维数组和二位数组中的几个问题示例说明
Jul 17 Javascript
使用jQuery不判断浏览器高度解决iframe自适应高度问题
Dec 16 Javascript
js+html5实现canvas绘制简单矩形的方法
Jun 05 Javascript
简介AngularJS的视图功能应用
Jun 17 Javascript
一个用jquery写的判断div滚动条到底部的方法【推荐】
Apr 29 Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
Dec 18 Javascript
jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例
Jan 30 Javascript
使用 Vue.js 仿百度搜索框的实例代码
May 09 Javascript
对Angular中单向数据流的深入理解
Mar 31 Javascript
vue2.0 下拉框默认标题设置方法
Aug 22 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
全国FM电台频率大全 - 5 内蒙古自治区
2020/03/11 无线电
PHP开发环境配置(MySQL数据库安装图文教程)
2010/04/28 PHP
codeigniter框架The URI you submitted has disallowed characters错误解决方法
2014/05/06 PHP
php字符串分割函数用法实例
2015/03/17 PHP
thinkPHP框架实现图像裁剪、缩放、加水印的方法
2017/03/14 PHP
jQuery Div中加载其他页面的实现代码
2009/02/27 Javascript
javascript 操作cookies及正确使用cookies的属性
2009/10/15 Javascript
JavaScript中数组的排序、乱序和搜索实现代码
2011/11/30 Javascript
iframe子页面获取父页面元素的方法
2013/11/05 Javascript
jQuery:delegate中select()不起作用的解决方法(实例讲解)
2014/01/26 Javascript
对比分析json及XML
2014/11/28 Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
2016/01/23 Javascript
jQuery中的Deferred和promise 的区别
2016/04/03 Javascript
Node.js+Express配置入门教程
2016/05/19 Javascript
JS在一定时间内跳转页面及各种刷新页面的实现方法
2016/05/26 Javascript
JavaScript必知必会(六) delete in instanceof
2016/06/08 Javascript
React Native 环境搭建的教程
2017/08/19 Javascript
关于js对textarea换行符的处理方法浅析
2018/08/03 Javascript
js尾调用优化的实现
2019/05/23 Javascript
js事件机制----捕获与冒泡机制实例分析
2020/05/22 Javascript
Nuxt pages下不同的页面对应layout下的页面布局操作
2020/11/05 Javascript
vue 动态创建组件的两种方法
2020/12/31 Vue.js
Python文件和目录操作详解
2015/02/08 Python
python友情链接检查方法
2015/07/08 Python
python修改list中所有元素类型的三种方法
2018/04/09 Python
DES加密解密算法之python实现版(图文并茂)
2018/12/06 Python
Python3使用TCP编写一个简易的文件下载器功能
2019/05/08 Python
Python实现操纵控制windows注册表的方法分析
2019/05/24 Python
python 解决Fatal error in launcher:错误问题
2020/05/21 Python
Python实现冒泡排序算法的完整实例
2020/11/04 Python
租赁协议书范本
2014/04/22 职场文书
机关作风整顿个人整改措施2014
2014/09/17 职场文书
入党介绍人意见范文
2015/06/01 职场文书
常住证明范本
2015/06/23 职场文书
利用Python实现Picgo图床工具
2021/11/23 Python
Python中requests库的用法详解
2022/06/05 Python