浅谈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 判断客户端浏览器类型代码
Mar 01 Javascript
firefox下input type=&quot;file&quot;的size是多大
Oct 24 Javascript
JavaScript中的null和undefined区别介绍
Jan 01 Javascript
JavaScript获取DOM元素的11种方法总结
Apr 25 Javascript
jQuery实现动画效果circle实例
Aug 06 Javascript
jquery实现两边飘浮可关闭的对联广告
Nov 27 Javascript
微信小程序 input表单与redio及下拉列表的使用实例
Sep 20 Javascript
bootstrapTable+ajax加载数据 refresh更新数据
Aug 31 Javascript
30分钟快速实现小程序语音识别功能
Nov 27 Javascript
详解可以用在VS Code中的正则表达式小技巧
May 14 Javascript
javascript实现点击星星小游戏
Dec 24 Javascript
JavaScript实现拖拽盒子效果
Feb 06 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 分页分组类
2009/12/10 PHP
一个PHP二维数组排序的函数分享
2014/01/17 PHP
PHP判断FORM表单或URL参数来的数据是否为整数的方法
2016/03/25 PHP
用javascript父窗口控制只弹出一个子窗口
2007/04/10 Javascript
类之Prototype.js学习
2007/06/13 Javascript
Javascript 面向对象 命名空间
2010/05/13 Javascript
js监听输入框值的即时变化onpropertychange、oninput
2011/07/13 Javascript
Js如何判断客户端是PC还是手持设备简单分析
2012/11/22 Javascript
javascript垃圾收集机制与内存泄漏详细解析
2013/11/11 Javascript
使用js dom和jquery分别实现简单增删改
2014/09/11 Javascript
基于jquery实现放大镜效果
2015/08/17 Javascript
安装使用Mongoose配合Node.js操作MongoDB的基础教程
2016/03/01 Javascript
js传值后台中文出现乱码的解决方法
2016/06/30 Javascript
ros::spin() 和 ros::spinOnce()函数的区别及详解
2016/10/01 Javascript
JS鼠标3次点击事件实现代码及扩展思路
2017/09/12 Javascript
实例分析js事件循环机制
2017/12/13 Javascript
swiper自定义分页器使用方法详解
2020/09/14 Javascript
解决vue中post方式提交数据后台无法接收的问题
2018/08/11 Javascript
Vue 监听列表item渲染事件方法
2018/09/06 Javascript
React SSR样式及SEO的实践
2018/10/22 Javascript
python实现文件助手中查看微信撤回消息
2019/04/29 Python
使用openCV去除文字中乱入的线条实例
2020/06/02 Python
Python 代码调试技巧示例代码
2020/08/11 Python
Python爬虫之Selenium鼠标事件的实现
2020/12/04 Python
HomeAway的巴西品牌:Alugue Temporada
2018/04/10 全球购物
介绍下Java中==和equals的区别
2013/09/01 面试题
西式婚礼证婚词
2014/01/12 职场文书
学生出入校管理制度
2014/01/16 职场文书
建议书怎么写
2014/03/12 职场文书
课外访万家心得体会
2014/09/03 职场文书
党支部审查意见
2015/06/02 职场文书
企业安全生产检查制度
2015/08/06 职场文书
诚信教育主题班会
2015/08/13 职场文书
《法国号》教学反思
2016/02/22 职场文书
vue使用v-model进行跨组件绑定的基本实现方法
2021/04/28 Vue.js
什么是clearfix (一文搞清楚css清除浮动clearfix)
2023/05/21 HTML / CSS