浅谈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 相关文章推荐
splice slice区别
Oct 09 Javascript
JQuery 获取和设置Select选项的代码
Feb 07 Javascript
jquery获取下拉列表的值为null的解决方法
Mar 18 Javascript
js三种排序算法分享
Aug 16 Javascript
js Dialog 实践分享
Oct 22 Javascript
javascript常见用法总结
May 22 Javascript
javascript获取四位数字或者字母的随机数
Jan 09 Javascript
jquery ztree异步搜索(搜叶子)实践
Feb 25 Javascript
JS简单实现DIV相对于浏览器固定位置不变的方法
Jun 17 Javascript
Vue 实现简易多行滚动&quot;弹幕&quot;效果
Jan 02 Javascript
vue+canvas实现移动端手写签名
May 21 Javascript
Vue中使用wangeditor富文本编辑的问题
Feb 07 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
星际争霸 Starcraft 发展史
2020/03/14 星际争霸
PHP中uploaded_files函数使用方法详解
2011/03/09 PHP
mysql_num_rows VS COUNT 效率问题分析
2011/04/23 PHP
解析php入库和出库
2013/06/25 PHP
限制复选框的最大可选数
2006/07/01 Javascript
Js+XML 操作
2006/09/20 Javascript
File文件控件,选中文件(图片,flash,视频)即立即预览显示
2009/04/09 Javascript
checkbox使用示例
2013/08/23 Javascript
详解Bootstrap的iCheck插件checkbox和radio
2016/08/24 Javascript
Javascript vue.js表格分页,ajax异步加载数据
2016/10/24 Javascript
AngularJS学习第一篇 AngularJS基础知识
2017/02/13 Javascript
vue中for循环更改数据的实例代码(数据变化但页面数据未变)
2017/09/15 Javascript
Vue和React组件之间的传值方式详解
2019/01/31 Javascript
微信小程序实现搜索历史功能
2020/03/26 Javascript
js与jquery获取input输入框中的值实例讲解
2020/02/27 jQuery
常见的在Python中实现单例模式的三种方法
2015/04/08 Python
Flask的图形化管理界面搭建框架Flask-Admin的使用教程
2016/06/13 Python
简单了解Django模板的使用
2017/12/20 Python
Flask框架WTForm表单用法示例
2018/07/20 Python
Python之两种模式的生产者消费者模型详解
2018/10/26 Python
python绘制散点图并标记序号的方法
2018/12/11 Python
解决tensorflow添加ptb库的问题
2020/02/10 Python
python实现sm2和sm4国密(国家商用密码)算法的示例
2020/09/26 Python
移动端解决悬浮层(悬浮header、footer)会遮挡住内容的3种方法
2015/03/27 HTML / CSS
印度尼西亚在线时尚购物网站:ZALORA印尼
2016/08/02 全球购物
美国卡车、吉普车和SUV零件网站:4 Wheel Parts
2016/11/24 全球购物
英国鞋类及配饰零售商:Kurt Geiger
2017/02/04 全球购物
Ivory Isle Designs美国/加拿大:婚礼和活动文具公司
2018/08/21 全球购物
Kusmi茶美国官网:优质散叶茶和茶包
2019/10/13 全球购物
Linux内核产生并发的原因
2012/07/13 面试题
酒店秘书求职信范文
2014/02/17 职场文书
物理教育专业求职信
2014/06/25 职场文书
国庆节标语大全
2014/10/08 职场文书
2015学生会文艺部工作总结
2015/04/03 职场文书
常用的MongoDB查询语句的示例代码
2021/07/25 MongoDB
oracle索引总结
2021/09/25 Oracle