浅谈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 相关文章推荐
php的文件上传入门教程(实例讲解)
Apr 10 Javascript
js返回前一页刷新本页重载页面
Jul 29 Javascript
node.js中的fs.open方法使用说明
Dec 17 Javascript
JS实现动态生成表格并提交表格数据向后端
Nov 25 Javascript
jQuery实现返回顶部功能
Feb 23 Javascript
JQuery点击事件回到页面顶部效果的实现代码
May 24 Javascript
JS获得多个同name 的input输入框的值的实现方法
Jan 09 Javascript
vue.js项目中实用的小技巧汇总
Nov 29 Javascript
vue-cli 构建骨架屏的方法示例
Nov 08 Javascript
vue element-ui之怎么封装一个自己的组件的详解
May 20 Javascript
深入浅析golang zap 日志库使用(含文件切割、分级别存储和全局使用等)
Feb 19 Javascript
JS性能优化实现方法及优点进行
Aug 30 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
phpMyAdmin 安装教程全攻略
2007/03/19 PHP
PHP 配置文件中open_basedir选项作用
2009/07/19 PHP
php使用cookie保存登录用户名的方法
2015/01/26 PHP
php强大的时间转换函数strtotime
2016/02/18 PHP
laravel框架中间件简单使用方法示例
2020/01/25 PHP
使用JQuery进行跨域请求
2010/01/25 Javascript
浅析JavaScript中的类型和对象
2013/11/29 Javascript
详解JavaScript逻辑Not运算符
2015/12/04 Javascript
基于jQuery的Web上传插件Uploadify使用示例
2016/05/19 Javascript
Node.js的Koa框架上手及MySQL操作指南
2016/06/13 Javascript
webpack4.x CommonJS模块化浅析
2018/11/09 Javascript
详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
2018/11/12 Javascript
微信小程序在text文本实现多种字体样式
2019/11/08 Javascript
jQuery操作事件完整实例分析
2020/01/10 jQuery
[01:08:17]2018DOTA2亚洲邀请赛3月29日 小组赛B组 EG VS VGJ.T
2018/03/30 DOTA
[50:12]EG vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python contextlib模块使用示例
2015/02/18 Python
python正则表达式面试题解答
2020/04/28 Python
浅谈dataframe中更改列属性的方法
2018/07/10 Python
简单了解python单例模式的几种写法
2019/07/01 Python
Python列表如何更新值
2020/05/27 Python
详解Python IO口多路复用
2020/06/17 Python
Python列表的深复制和浅复制示例详解
2021/02/12 Python
CSS3田字格列表的样式编写方法
2018/11/22 HTML / CSS
e路東瀛(JAPANiCAN)香港:日本旅游、日本酒店和温泉旅馆预订
2018/11/21 全球购物
俄罗斯卫浴采暖及维修用品超级市场:Dkrussia
2020/05/12 全球购物
电气自动化自荐信
2013/10/10 职场文书
家电业务员岗位职责
2014/03/10 职场文书
就业推荐表自我鉴定范文
2014/03/21 职场文书
博士生专家推荐信
2015/03/25 职场文书
2015年商场工作总结
2015/04/27 职场文书
工伤劳动仲裁代理词
2015/05/25 职场文书
《分数的意义》教学反思
2016/02/20 职场文书
导游词之沈阳植物园
2019/11/30 职场文书
TensorFlow的自动求导原理分析
2021/05/26 Python
浅谈MySql update会锁定哪些范围的数据
2022/06/25 MySQL