浅谈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 window.open打开新窗口后无法再次打开该窗口问题的解决方法
Apr 12 Javascript
javascript生成随机颜色示例代码
May 05 Javascript
jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
May 11 Javascript
js动态创建及移除div的方法
Jun 03 Javascript
Bootstrap响应式侧边栏改进版
Sep 17 Javascript
微信小程序 Audio API详解及实例代码
Sep 30 Javascript
关于js中的鼠标事件总结
Jul 11 Javascript
bootstrap-Treeview实现级联勾选
Nov 23 Javascript
Node使用Sequlize连接Mysql报错:Access denied for user ‘xxx’@‘localhost’
Jan 03 Javascript
js实现无缝轮播图效果
Mar 09 Javascript
微信小程序实现菜单左右联动
May 19 Javascript
游戏开发中如何使用CocosCreator进行音效处理
Apr 14 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 中的4种标记风格介绍
2012/05/10 PHP
PHP 自定义错误处理函数的使用详解
2013/05/10 PHP
php模拟ping命令(php exec函数的使用方法)
2013/10/25 PHP
PHP封装的一个支持HTML、JS、PHP重定向的多功能跳转函数
2014/06/19 PHP
php实现统计网站在线人数的方法
2015/05/12 PHP
Zend Framework路由器用法实例详解
2016/12/11 PHP
thinkphp框架page类与bootstrap分页(美化)
2017/06/25 PHP
PHP自动识别当前使用移动终端
2018/05/21 PHP
php中try catch捕获异常实例详解
2020/08/06 PHP
获取页面高度,窗口高度,滚动条高度等参数值getPageSize,getPageScroll
2006/09/22 Javascript
Firefox window.close()的使用注意事项
2009/04/11 Javascript
js之onload事件的一点使用心得
2013/08/14 Javascript
jQuery搜索同辈元素方法
2015/02/10 Javascript
JS拖动鼠标画出方框实现鼠标选区的方法
2015/08/05 Javascript
jQuery插件imgPreviewQs实现上传图片预览
2016/01/15 Javascript
Jquery针对tr td的一些实用操作方法(必看篇)
2016/10/05 Javascript
div实现自适应高度的textarea实现angular双向绑定
2017/01/08 Javascript
详解axios 全攻略之基本介绍与使用(GET 与 POST)
2017/09/15 Javascript
JS获取当前地理位置的方法
2017/10/25 Javascript
基于jquery实现五星好评
2017/11/18 jQuery
vue多次循环操作示例
2019/02/08 Javascript
vue项目实现设置根据路由高亮对应的菜单项操作
2020/08/06 Javascript
antd日期选择器禁止选择当天之前的时间操作
2020/10/29 Javascript
[01:54]胎教DOTA2 准妈妈玩家现身中国区预选赛
2016/06/26 DOTA
python 处理telnet返回的More,以及get想要的那个参数方法
2019/02/14 Python
Pandas_cum累积计算和rolling滚动计算的用法详解
2019/07/04 Python
python实现ip地址的包含关系判断
2020/02/07 Python
Python基于BeautifulSoup爬取京东商品信息
2020/06/01 Python
新闻专业大学生找工作的自我评价
2013/10/30 职场文书
酒吧总经理岗位职责
2013/12/10 职场文书
给老婆的保证书范文
2014/04/28 职场文书
村党支部换届选举方案
2014/05/02 职场文书
代领毕业证委托书
2014/08/02 职场文书
党的群众路线教育实践活动党员个人整改措施
2014/10/27 职场文书
Python帮你解决手机qq微信内存占用太多问题
2022/02/15 Python
Elasticsearch Recovery 详细介绍
2022/04/19 Java/Android