浅谈angularJS 作用域


Posted in Javascript onJuly 05, 2015
<!doctype html>
<html ng-app="firstApp">
<head>
<meta charset="utf-8">
<script src="angular-1.3.0.js"></script>
</head>
<body>

<div ng-controller="parentCtrl">
<input ng-model="args">
<div ng-controller="childCtrl">
<input ng-model="args">
</div>
</div>
<script>
var app=angular.module('firstApp',[]);
app.controller('parentCtrl',function($scope) {
$scope.args = '123';
}).controller('childCtrl', function($scope) {

});
</script>

案例说明:

虽然在 childCtrl 中没有定义具体的 args 属性,但是因为 childCtrl 的作用域继承自 parentCtrl 的作用域,

因此,childCtrl通过原型链 到父作用域args 属性并设置到input中。且在父input中输入值自己动同步到子input中
但是反之不行。即子中修改,无法改变父中的值,且导致父修改后子也不同步了,原因:在子作用域input输入内容时,
因为 HTML 代码中 model 明确绑定在 childCtrl 的作用域中,因此 AngularJS 会为 childCtrl 生成一个 args 原始类型属性。
根据 AngularJS 作用域继承原型机制,childCtrl 在自己的作用域找到args属性值,故就不从父中查找args值。
导致最终子作用域有args,父作用域有args,子和父之间的值不会再保持同步。

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
js中document.getElementByid、document.all和document.layers区分介绍
Dec 08 Javascript
深入理解JavaScript系列(6) 强大的原型和原型链
Jan 15 Javascript
JavaScript中判断整数的多种方法总结
Nov 08 Javascript
JavaScript生成福利彩票双色球号码
May 15 Javascript
AngularJS 实现按需异步加载实例代码
Oct 18 Javascript
javascript bom是什么及bom和dom的区别
Nov 26 Javascript
Node.js+Express配置入门教程详解
May 19 Javascript
bootstrap输入框组代码分享
Jun 07 Javascript
微信小程序  wx.request合法域名配置详解
Nov 23 Javascript
jQuery开源组件BootstrapValidator使用详解
Jun 29 jQuery
vue2.0中vue-cli实现全选、单选计算总价格的实例代码
Jul 18 Javascript
对Vue table 动态表格td可编辑的方法详解
Aug 28 Javascript
javascript 应用小技巧方法汇总
Jul 05 #Javascript
javascript常用功能汇总
Jul 05 #Javascript
最新最热最实用的15个jQuery插件汇总
Jul 05 #Javascript
JavaScript返回上一页的三种方法及区别介绍
Jul 04 #Javascript
javascript实现点击提交按钮后显示loading的方法
Jul 03 #Javascript
jQuery动态背景图片效果实现方法
Jul 03 #Javascript
js实现防止被iframe的方法
Jul 03 #Javascript
You might like
PHP获取表单textarea数据中的换行问题
2010/09/10 PHP
在windows服务器开启php的gd库phpinfo中未发现
2013/01/13 PHP
探讨PHP调用时间格式的参数详解
2013/06/06 PHP
php中的mongodb select常用操作代码示例
2014/09/06 PHP
php数组去除空值函数分享
2015/02/02 PHP
thinkPHP线上自动加载异常与修复方法实例分析
2016/12/01 PHP
PHPUnit测试私有属性和方法功能示例
2018/06/12 PHP
javascript 关于# 和 void的区别分析
2009/10/26 Javascript
js+css实现增加表单可用性之提示文字
2013/06/03 Javascript
jQuery异步加载数据并添加事件示例
2014/08/24 Javascript
JavaScript动态改变表格单元格内容的方法
2015/03/30 Javascript
javascript运动效果实例总结(放大缩小、滑动淡入、滚动)
2016/01/08 Javascript
javascript中FOREACH数组方法使用示例
2016/03/01 Javascript
深入解析桶排序算法及Node.js上JavaScript的代码实现
2016/07/06 Javascript
深入理解基于vue-cli的vuex配置
2017/07/24 Javascript
快速了解Node中的Stream流是什么
2019/02/13 Javascript
原生JS实现列表内容自动向上滚动效果
2019/05/22 Javascript
Python实现处理管道的方法
2015/06/04 Python
基于DATAFRAME中元素的读取与修改方法
2018/06/08 Python
python实现浪漫的烟花秀
2019/01/30 Python
Python 保持登录状态进行接口测试的方法示例
2019/08/06 Python
使用python写的opencv实时监测和解析二维码和条形码
2019/08/14 Python
pycharm永久激活超详细教程
2020/10/29 Python
使用pandas实现筛选出指定列值所对应的行
2020/12/13 Python
StubHub新加坡:购买和出售全球活动门票
2017/03/10 全球购物
名人珠宝设计师:Melinda Maria Jewelry
2019/03/06 全球购物
Quiksilver荷兰官方网站:冲浪和滑雪板
2019/11/16 全球购物
Skyscanner香港:机票比价, 平机票和廉价航空机票预订
2020/02/07 全球购物
奥林匹克运动会口号
2014/06/19 职场文书
小学教师2014年度工作总结
2014/12/03 职场文书
社区服务活动报告
2015/02/05 职场文书
社区安全温馨提示语
2015/07/14 职场文书
环境卫生标语
2015/08/03 职场文书
盘点2020年适合农村地区创业的项目
2019/10/16 职场文书
基于Redis实现分布式锁的方法(lua脚本版)
2021/05/12 Redis
关于Python中进度条的六个实用技巧分享
2022/04/05 Python