浅谈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 相关文章推荐
myEvent.js javascript跨浏览器事件框架
Oct 24 Javascript
jQuery实现的登录浮动框效果代码
Sep 26 Javascript
基于jQuery实现音乐播放试听列表
Apr 14 Javascript
什么是JavaScript中的结果值?
Oct 08 Javascript
分类解析jQuery选择器
Nov 23 Javascript
JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法
Jan 03 Javascript
原生js实现仿window10系统日历效果的实例
Oct 31 Javascript
深入了解JavaScript 的 WebAssembly
Jun 15 Javascript
解决layer.open后laydate失效的问题
Sep 06 Javascript
JavaScript 类的封装操作示例详解
May 16 Javascript
解决基于 keep-alive 的后台多级路由缓存问题
Dec 23 Javascript
React如何使用axios请求数据并把数据渲染到组件
Aug 05 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
967 个函式
2006/10/09 PHP
php获取当前网址url并替换参数或网址的方法
2010/06/06 PHP
php小经验:解析preg_match与preg_match_all 函数
2013/06/29 PHP
PHP中创建和验证哈希的简单方法实探
2015/07/06 PHP
php $_SESSION会员登录实例分享
2021/01/19 PHP
php7 list()、session及其他模块的修改实例分析
2020/05/25 PHP
Javascript获取当前日期的农历日期代码
2014/10/08 Javascript
javascript获取四位数字或者字母的随机数
2015/01/09 Javascript
【JS+CSS3】实现带预览图幻灯片效果的示例代码
2016/03/17 Javascript
JS实现图片剪裁并预览效果
2016/08/12 Javascript
Websocket协议详解及简单实例代码
2016/12/12 Javascript
vue如何从接口请求数据
2017/06/22 Javascript
微信小程序picker组件下拉框选择input输入框的实例
2017/09/20 Javascript
Vue实现push数组并删除的例子
2019/11/01 Javascript
微信小程序实现Swiper轮播图效果
2019/11/22 Javascript
js中script的上下放置区别,Dom的增删改创建操作实例分析
2019/12/16 Javascript
vue.js页面加载执行created,mounted的先后顺序说明
2020/11/07 Javascript
vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)
2020/11/12 Javascript
python实现每次处理一个字符的三种方法
2014/10/09 Python
教大家玩转Python字符串处理的七种技巧
2017/03/31 Python
Django 2.0版本的新特性抢先看!
2018/01/05 Python
用Python将mysql数据导出成json的方法
2018/08/21 Python
Python设计模式之桥接模式原理与用法实例分析
2019/01/10 Python
Python爬虫 批量爬取下载抖音视频代码实例
2019/08/16 Python
OpenCV+face++实现实时人脸识别解锁功能
2019/08/28 Python
Python中常用的高阶函数实例详解
2020/02/21 Python
加拿大品牌鞋包连锁店:Little Burgundy
2021/02/28 全球购物
火锅店创业计划书范文
2014/02/02 职场文书
七一建党节演讲稿
2014/09/11 职场文书
国际贸易实务实训报告
2014/11/05 职场文书
先进集体申报材料
2014/12/25 职场文书
2015年餐厅服务员工作总结
2015/04/23 职场文书
2016小学新学期寄语
2015/12/04 职场文书
详解MongoDB的条件查询和排序
2021/06/23 MongoDB
一小时学会TensorFlow2之基本操作2实例代码
2021/09/04 Python
Javascript之datagrid查询详解
2021/09/15 Javascript