浅谈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 相关文章推荐
javascript小数计算出现近似值的解决办法
Feb 06 Javascript
jquery模拟按下回车实现代码
Sep 20 Javascript
Bootstrap自定义文件上传下载样式
May 26 Javascript
JavaScript中关于for循环删除数组元素内容时出现的问题
Nov 21 Javascript
原生JS简单实现ajax的方法示例
Nov 29 Javascript
浅谈Javascript事件对象
Feb 05 Javascript
AngularJs+Bootstrap实现漂亮的计算器
Aug 10 Javascript
JS实现点击循环切换显示内容的方法
Oct 19 Javascript
JS实现的集合去重,交集,并集,差集功能示例
Mar 13 Javascript
值得收藏的八个常用的js正则表达式
Oct 19 Javascript
vux-scroller实现移动端上拉加载功能过程解析
Oct 08 Javascript
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
Mar 01 Vue.js
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入门教程 精简版
2009/12/13 PHP
CI框架装载器Loader.php源码分析
2014/11/04 PHP
微信公众号点击菜单即可打开并登录微站的实现方法
2014/11/14 PHP
详解PHP对象的串行化与反串行化
2016/01/24 PHP
thinkPHP js文件中U方法不被解析问题的解决方法
2016/12/05 PHP
使用PHPWord生成word文档的方法详解
2019/06/06 PHP
json简单介绍
2008/06/10 Javascript
在JavaScript中获取请求的URL参数[正则]
2010/12/25 Javascript
jQuery新闻滚动插件 jquery.roller.js
2011/06/27 Javascript
使用基于jquery的gamequery插件做JS乒乓球游戏
2011/07/31 Javascript
js设置cookie过期及清除浏览器对应名称的cookie
2013/10/24 Javascript
设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
2013/11/18 Javascript
判断javascript的数据类型(示例代码)
2013/12/11 Javascript
元素未显示设置width/height时IE中使用currentStyle获取为auto
2014/05/04 Javascript
JavaScript实现简洁的俄罗斯方块完整实例
2016/03/01 Javascript
javascript简易画板开发
2020/04/12 Javascript
详解Js模板引擎(TrimPath)
2016/11/22 Javascript
浅谈Javascript中的Label语句
2016/12/14 Javascript
JS搜狐面试题分析
2016/12/16 Javascript
基于Datatables跳转到指定页的简单实例
2017/11/09 Javascript
Es6 Generator函数详细解析
2018/02/24 Javascript
js限制输入框只能输入数字(onkeyup触发)
2018/09/28 Javascript
详解javascript 变量提升(Hoisting)
2019/03/12 Javascript
vue实现文件上传读取及下载功能
2020/11/17 Javascript
python中类的一些方法分析
2014/09/25 Python
Python上下文管理器和with块详解
2017/09/09 Python
详解python的sorted函数对字典按key排序和按value排序
2018/08/10 Python
python从子线程中获得返回值的方法
2019/01/30 Python
用Q-learning算法实现自动走迷宫机器人的方法示例
2019/06/03 Python
英国汽车零件购物网站:GSF Car Parts
2019/05/23 全球购物
产品生产计划书
2014/05/07 职场文书
妇女干部培训方案
2014/05/12 职场文书
保险公司演讲稿
2014/09/02 职场文书
争先创优心得体会
2014/09/12 职场文书
优秀团员主要事迹材料
2015/11/05 职场文书
浅谈 JavaScript 沙箱Sandbox
2021/11/02 Javascript