浅谈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 相关文章推荐
select标签模拟/美化方法采用JS外挂式插件
Apr 01 Javascript
js统计录入文本框中字符的个数并加以限制不超过多少
May 23 Javascript
jQuery修改class属性和CSS样式整理
Jan 30 Javascript
浏览器兼容的JS写法总结
Apr 27 Javascript
性能优化之代码优化页面加载速度
Mar 01 Javascript
JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解
Sep 19 Javascript
基于vue2.x的电商图片放大镜插件的使用
Jan 22 Javascript
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
Sep 11 Javascript
通过vue手动封装on、emit、off的代码详解
May 29 Javascript
使用Layer组件弹出多个对话框(非嵌套)与关闭及刷新的例子
Sep 25 Javascript
webpack安装配置与常见使用过程详解(结合vue)
Jun 01 Javascript
jquery实现拖拽小方块效果
Dec 10 jQuery
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操作文件的一些基本函数使用示例
2014/11/18 PHP
详解php与ethereum客户端交互
2018/04/28 PHP
php实现将数组或对象写入到文件的方法小结【三种方法】
2020/04/22 PHP
使用CSS3实现字体颜色渐变的实现
2021/03/09 HTML / CSS
checkbox 多选框 联动实现代码
2008/10/22 Javascript
JavaScript 入门基础知识 想学习js的朋友可以参考下
2009/12/26 Javascript
jQuery事件 delegate()使用方法介绍
2012/10/30 Javascript
使用jquery自定义鼠标样式满足个性需求
2013/11/05 Javascript
JavaScript中输出标签的方法
2014/08/27 Javascript
png在IE6 下无法透明的解决方法汇总
2015/05/21 Javascript
jQuery实现有动画淡出效果的二级折叠菜单代码
2015/10/17 Javascript
基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
2016/02/22 Javascript
JS 动态加载js文件和css文件 同步/异步的两种简单方式
2016/09/23 Javascript
javascript数据结构之串的概念与用法分析
2017/04/12 Javascript
用React-Native+Mobx做一个迷你水果商城APP(附源码)
2017/12/25 Javascript
jQuery实现表单动态添加数据并提交的方法
2018/07/19 jQuery
微信小程序中使用自定义图标(阿里icon)的方法
2018/08/20 Javascript
webpack4打包vue前端多页面项目
2018/09/17 Javascript
js实现搜索栏效果
2018/11/16 Javascript
详解javascript函数写法大全
2019/03/25 Javascript
vue项目中自定义video视频控制条的实现代码
2020/04/26 Javascript
Vue实现跑马灯效果
2020/05/25 Javascript
解决qrcode.js生成二维码时必须定义一个空div的问题
2020/07/09 Javascript
vue3.0封装轮播图组件的步骤
2021/03/04 Vue.js
pandas 对group进行聚合的例子
2019/12/27 Python
浅谈Pycharm的项目文件名是红色的原因及解决方式
2020/06/01 Python
西雅图电动自行车公司:Rad Power Bikes
2020/02/02 全球购物
芭比波朗加拿大官方网站:Bobbi Brown Cosmetics CA
2020/11/05 全球购物
C# .NET面试题
2015/11/28 面试题
质量工程师岗位职责
2013/11/16 职场文书
国贸专业个人求职信分享
2013/12/04 职场文书
中专生职业生涯规划书范文
2013/12/29 职场文书
事业单位绩效考核实施方案
2014/03/27 职场文书
教师病假条范文
2015/08/17 职场文书
阿里云服务器Ubuntu 20.04上安装Odoo 15
2022/05/20 Servers
服务器nginx权限被拒绝解决案例
2022/09/23 Servers