浅谈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 相关文章推荐
刷新页面实现方式总结(HTML,ASP,JS)
Nov 13 Javascript
CSS和Javascript简单复习资料
Jun 29 Javascript
json2.js的初步学习与了解
Oct 06 Javascript
js获取html参数及向swf传递参数应用介绍
Feb 18 Javascript
javascript设置连续两次点击按钮时间间隔的方法
Oct 28 Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
Dec 16 Javascript
js实现单击图片放大图片的方法
Feb 17 Javascript
bootstrap中模态框、模态框的属性实例详解
Feb 17 Javascript
不使用 JS 匿名函数理由
Nov 17 Javascript
vue2.0模拟锚点的实例
Mar 14 Javascript
node.js实现简单的压缩/解压缩功能示例
Nov 05 Javascript
React如何创建组件
Jun 27 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网上调查系统
2006/10/09 PHP
一个可以删除字符串中HTML标记的PHP函数
2006/10/09 PHP
Yii实现单用户博客系统文章详情页插入评论表单的方法
2015/12/28 PHP
phpcms配置列表页以及获得文章发布时间
2017/07/04 PHP
CL vs ForZe BO5 第三场 2.13
2021/03/10 DOTA
jQuery学习笔记[1] jQuery中的DOM操作
2010/12/03 Javascript
jQuery UI结合Ajax创建可定制的Web界面
2016/06/22 Javascript
AngularJS报错$apply already in progress的解决方法分析
2017/01/30 Javascript
vue获取当前点击的元素并传值的实例
2018/03/09 Javascript
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
2018/08/10 Javascript
详解React native fetch遇到的坑
2018/08/30 Javascript
JS中的算法与数据结构之队列(Queue)实例详解
2019/08/20 Javascript
详解如何在JS代码中消灭for循环
2019/12/11 Javascript
Node.js操作MongoDB数据库实例分析
2020/01/19 Javascript
Vue如何使用混合Mixins和插件开发详解
2020/02/05 Javascript
解决vue刷新页面以后丢失store的数据问题
2020/08/11 Javascript
原生JavaScript实现进度条
2021/02/19 Javascript
[00:33]DOTA2上海特级锦标赛 CDEC战队宣传片
2016/03/04 DOTA
python reverse反转部分数组的实例
2018/12/13 Python
Python实现文件压缩和解压的示例代码
2020/08/12 Python
基于HTML5 audio元素播放声音jQuery小插件
2011/05/11 HTML / CSS
用HTML5制作一个简单的弹力球游戏
2015/05/12 HTML / CSS
国外平面设计第一市场:99designs
2016/10/25 全球购物
RUIFIER官网:英国奢侈高级珠宝品牌
2020/06/12 全球购物
MIKI HOUSE美国官方网上商店:日本领先的婴儿和儿童高级时装品牌
2020/06/21 全球购物
会计电算化应届生求职信
2013/11/03 职场文书
个人简历自荐信
2013/12/05 职场文书
作弊检讨书1000字
2014/02/01 职场文书
保洁公司服务承诺书
2014/05/28 职场文书
个人融资协议书
2014/10/02 职场文书
公积金接收函格式
2015/01/30 职场文书
会计工作岗位职责
2015/02/03 职场文书
2016年优秀团支部事迹材料
2016/02/26 职场文书
2019年最新借条范本!
2019/07/08 职场文书
Python 线程池模块之多线程操作代码
2021/05/20 Python
Java网络编程之UDP实现原理解析
2021/09/04 Java/Android