浅谈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 相关文章推荐
用JQuery 实现的自定义对话框
Mar 24 Javascript
JavaScript中的Location地址对象
Jan 16 Javascript
页面使用密码保护代码
Apr 10 Javascript
理运用命名空间让js不产生冲突避免全局变量的泛滥
Jun 15 Javascript
jquery操作angularjs对象
Jun 26 Javascript
TypeOf这些知识点你了解吗
Feb 21 Javascript
BootStrap智能表单实战系列(八)表单配置json详解
Jun 13 Javascript
jQuery基于BootStrap样式实现无限极地区联动
Aug 26 Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
Mar 04 Javascript
vue实现选项卡及选项卡切换效果
Apr 24 Javascript
vue组件实现弹出框点击显示隐藏效果
Oct 26 Javascript
原生js+canvas实现贪吃蛇效果
Aug 02 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
Adodb的十个实例(清晰版)
2006/12/31 PHP
IIS下PHP的三种配置方式对比
2014/11/20 PHP
JS声明变量背后的编译原理剖析
2012/12/28 Javascript
js操作table示例(个人心得)
2013/11/29 Javascript
js中哈希表的几种用法总结
2014/01/28 Javascript
js判断为空Null与字符串为空简写方法
2014/02/24 Javascript
跟我学习javascript的this关键字
2020/05/28 Javascript
浅谈JavaScript for循环 闭包
2016/06/22 Javascript
JS实现的多张图片轮流播放幻灯片效果
2016/07/22 Javascript
老生常谈JavaScript 函数表达式
2016/09/01 Javascript
JS实现图片上传预览功能
2016/11/21 Javascript
JavaScript设计模式之代理模式详解
2017/06/09 Javascript
JS实现将链接生成二维码并转为图片的方法
2018/03/17 Javascript
vue interceptor 使用教程实例详解
2018/09/13 Javascript
Element 默认勾选表格 toggleRowSelection的实现
2019/09/04 Javascript
[01:52]2020年DOTA2 TI10夏季活动预告片
2020/07/15 DOTA
python解决字典中的值是列表问题的方法
2013/03/04 Python
详细解读Python中的__init__()方法
2015/05/02 Python
python 删除非空文件夹的实例
2018/04/26 Python
nohup后台启动Python脚本,log不刷新的解决方法
2019/01/14 Python
python ---lambda匿名函数介绍
2019/03/13 Python
python监控进程状态,记录重启时间及进程号的实例
2019/07/15 Python
tensorflow之并行读入数据详解
2020/02/05 Python
python默认参数调用方法解析
2020/02/09 Python
PyTorch中Tensor的数据统计示例
2020/02/17 Python
python3中的logging记录日志实现过程及封装成类的操作
2020/05/12 Python
Python高阶函数与装饰器函数的深入讲解
2020/11/10 Python
python 指定源路径来解决import问题的操作
2021/03/04 Python
How TDD works
2012/09/30 面试题
中学自我评价
2014/01/31 职场文书
乡村文明行动实施方案
2014/03/29 职场文书
教师演讲稿开场白
2014/08/25 职场文书
学习教师敬业奉献模范事迹材料思想汇报
2014/09/19 职场文书
房屋登记授权委托书范本
2014/10/09 职场文书
优秀党员个人总结
2015/02/14 职场文书
生死抉择观后感
2015/06/09 职场文书