浅谈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 相关文章推荐
广告切换效果(缓动切换)
May 27 Javascript
jquery.ui.progressbar 中文文档
Nov 26 Javascript
Iframe 自动适应页面的高度示例代码
Feb 26 Javascript
jQuery选择器之基本选择器与层次选择器
Mar 03 Javascript
分享我的jquery实现下拉菜单心的
Nov 29 Javascript
jQuery设置Cookie及删除Cookie实例分析
Apr 15 Javascript
JavaScript学习小结之被嫌弃的eval函数和with语句实例详解
Aug 01 Javascript
js分页之前端代码实现和请求处理
Aug 04 Javascript
js实现登录与注册界面
Nov 01 Javascript
VS Code转换大小写、修改选中文字或代码颜色的方法
Dec 15 Javascript
Vue的轮播图组件实现方法
Mar 03 Javascript
纯js实现无缝滚动功能代码实例
Feb 21 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
Discuz! 5.0.0论坛程序中加入一段js代码,让会员点击下载附件前自动弹出提示窗口
2007/04/18 PHP
php抓取并保存网站图片的实现代码
2015/10/28 PHP
使用PHP开发留言板功能
2019/11/19 PHP
CL vs ForZe BO5 第二场 2.13
2021/03/10 DOTA
Javascript 模式实例 观察者模式
2009/10/24 Javascript
js 数值项目的格式化函数代码
2010/05/14 Javascript
来自国外的14个图片放大编辑的jQuery插件整理
2010/10/20 Javascript
使用js画图之圆、弧、扇形
2015/01/12 Javascript
angularJS 中$attrs方法使用指南
2015/02/09 Javascript
javascript等号运算符使用详解
2015/04/16 Javascript
使用NodeJs 开发微信公众号(三)微信事件交互实例
2016/03/02 NodeJs
Vue.js基础知识汇总
2016/04/27 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
2016/05/10 Javascript
JS实现的验证身份证及获取地区功能示例
2017/01/16 Javascript
JavaScript事件方法(实例讲解)
2017/06/27 Javascript
JavaScript箭头函数_动力节点Java学院整理
2017/06/28 Javascript
基于Vue生产环境部署详解
2017/09/15 Javascript
原生JS实现随机点名项目的实例代码
2019/04/30 Javascript
js 实现ajax发送步骤过程详解
2019/07/25 Javascript
解决$store.getters调用不执行的问题
2019/11/08 Javascript
Element Dialog对话框的使用示例
2020/07/26 Javascript
Vue+penlayers实现多边形绘制及展示
2020/12/24 Vue.js
python中time库的实例使用方法
2019/10/31 Python
pd.DataFrame统计各列数值多少的实例
2019/12/05 Python
Python 剪绳子的多种思路实现(动态规划和贪心)
2020/02/24 Python
Tensorflow使用Anaconda、pycharm安装记录
2020/07/29 Python
pycharm 复制代码出现空格的解决方式
2021/01/15 Python
CSS3移动端vw+rem不依赖JS实现响应式布局的方法
2019/01/23 HTML / CSS
基于HTML5 FileSystem API的使用介绍
2013/04/24 HTML / CSS
菲律宾旅游网站:Expedia菲律宾
2017/10/11 全球购物
怎样建立和理解非常复杂的声明?例如定义一个包含N 个指向返回 指向字符的指针的函数的指针的数组?
2013/03/19 面试题
高级Java程序员面试要点
2013/08/02 面试题
行政部主管岗位职责
2013/12/28 职场文书
办公室主任个人对照检查材料思想汇报
2014/10/11 职场文书
2015年团支书工作总结
2015/04/03 职场文书
《鸟的天堂》教学反思
2016/02/19 职场文书