浅谈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中实现命名空间
Nov 23 Javascript
求得div 下 img的src地址的js代码
Feb 28 Javascript
通过上下左右键和回车键切换光标实现代码
Mar 08 Javascript
setTimeout和setInterval的深入理解
Nov 08 Javascript
js获取form的方法
May 06 Javascript
解析Vue2.0双向绑定实现原理
Feb 23 Javascript
jquery实现表单获取短信验证码代码
Mar 13 Javascript
swiper插件自定义切换箭头按钮
Dec 28 Javascript
vue 组件使用中的一些细节点
Apr 25 Javascript
如何实现双向绑定mvvm的原理实现
May 28 Javascript
layer.prompt使文本框为空的情况下也能点击确定的方法
Sep 24 Javascript
原生JS封装vue Tab切换效果
Apr 28 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
基于PHP给大家讲解防刷票的一些技巧
2015/11/18 PHP
ThinkPHP 在阿里云上的nginx.config配置实例详解
2017/10/11 PHP
CodeIgniter框架数据库基本操作示例
2018/05/24 PHP
根据一段代码浅谈Javascript闭包
2010/12/14 Javascript
jquery的ajax请求全面了解
2013/03/20 Javascript
使用jQuery实现的掷色子游戏动画效果
2014/03/14 Javascript
jquery判断小数点两位和自动删除小数两位后的数字
2014/03/19 Javascript
浅谈javascript中基本包装类型
2015/06/03 Javascript
js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
2015/09/02 Javascript
JS模拟bootstrap下拉菜单效果实例
2016/06/17 Javascript
详解堆的javascript实现方法
2016/11/29 Javascript
vue.js实现价格格式化的方法
2017/05/23 Javascript
jQuery实现高级检索功能
2019/05/28 jQuery
JS array数组检测方式解析
2020/05/19 Javascript
如何将Node.js中的回调转换为Promise
2020/11/10 Javascript
利用标准库fractions模块让Python支持分数类型的方法详解
2017/08/11 Python
python的exec、eval使用分析
2017/12/11 Python
浅谈Django REST Framework限速
2017/12/12 Python
Python实现二叉树的常见遍历操作总结【7种方法】
2019/03/06 Python
Python3实现计算两个数组的交集算法示例
2019/04/03 Python
如何使用Flask-Migrate拓展数据库表结构
2019/07/24 Python
python中的列表与元组的使用
2019/08/08 Python
详解Python可视化神器Yellowbrick使用
2019/11/11 Python
pycharm内无法import已安装的模块问题解决
2020/02/12 Python
澳大利亚最超值的自行车之家:Reid Cycles
2019/03/24 全球购物
公司财务总监岗位职责
2013/12/14 职场文书
大学生秋游活动方案
2014/02/17 职场文书
2014院党委领导班子对照检查材料思想汇报
2014/09/24 职场文书
2015年入党积极分子评语
2015/03/26 职场文书
2016大学迎新欢迎词
2015/09/29 职场文书
2017春节晚会开幕词
2016/03/03 职场文书
2019最新婚庆对联集锦!
2019/07/10 职场文书
Redis基于Bitmap实现用户签到功能
2021/06/20 Redis
PHP设计模式(观察者模式)
2021/07/07 PHP
SpringBoot快速入门详解
2021/07/21 Java/Android
Golang 对es的操作实例
2022/04/20 Golang