浅谈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实现DIV滚动自动滚动到底部的代码
Mar 01 Javascript
javascript实现微信分享
Dec 23 Javascript
JavaScript通过this变量快速找出用户选中radio按钮的方法
Mar 23 Javascript
JavaScript如何获取数组最大值和最小值
Nov 18 Javascript
原生js轮播(仿慕课网)
Feb 15 Javascript
React-Native中禁用Navigator手势返回的示例代码
Sep 09 Javascript
原生js封装运动框架的示例讲解
Oct 01 Javascript
解决vue+webpack打包路径的问题
Mar 06 Javascript
JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析
Jul 26 Javascript
JavaScript中常用的简洁高级技巧总结
Mar 10 Javascript
layui 实现表单和文件上传一起传到后台的例子
Sep 16 Javascript
Ajax实现页面无刷新留言效果
Mar 24 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连接oracle数据库的方法(测试成功)
2016/05/26 PHP
PHP运用foreach神奇的转换数组(实例讲解)
2018/02/01 PHP
PHP校验15位和18位身份证号的类封装
2018/11/07 PHP
Ajax::prototype 源码解读
2007/01/22 Javascript
Jquery之Ajax运用 学习运用篇
2011/09/26 Javascript
javascript学习笔记(四)function函数部分
2014/09/30 Javascript
jQuery中:first-child选择器用法实例
2014/12/31 Javascript
jquery实现简单的轮换出现效果实例
2015/07/23 Javascript
JS+CSS实现的经典圆角下拉菜单效果代码
2015/10/21 Javascript
jQuery给元素添加样式的方法详解
2015/12/30 Javascript
超实用的javascript时间处理总结
2016/08/16 Javascript
jQuery中的100个技巧汇总
2016/12/15 Javascript
浅谈Angular.js中使用$watch监听模型变化
2017/01/10 Javascript
webpack打包单页面如何引用的js
2017/06/07 Javascript
Javacript中自定义的map.js  的方法
2017/11/26 Javascript
如何获取TypeScript的声明文件.d.ts
2018/05/01 Javascript
Python实现把数字转换成中文
2015/06/29 Python
浅析Python中的赋值和深浅拷贝
2017/08/15 Python
Python时间的精准正则匹配方法分析
2017/08/17 Python
python生成excel的实例代码
2017/11/08 Python
jupyter notebook引用from pyecharts.charts import Bar运行报错
2020/04/23 Python
flask入门之文件上传与邮件发送示例
2018/07/18 Python
Python从文件中读取数据的方法讲解
2019/02/14 Python
python实现学员管理系统
2019/02/26 Python
如何在keras中添加自己的优化器(如adam等)
2020/06/19 Python
pycharm最新激活码有效期至2100年(亲测可用)
2021/02/05 Python
html5 sessionStorage会话存储_动力节点Java学院整理
2017/07/06 HTML / CSS
C#面试常见问题
2013/02/25 面试题
在C#中如何实现多态
2014/07/02 面试题
奥巴马英文演讲稿
2014/05/15 职场文书
安全标语大全
2014/06/10 职场文书
甜品蛋糕店创业计划书
2014/09/21 职场文书
教师批评与自我批评材料
2014/10/16 职场文书
外国人来华邀请函
2015/01/31 职场文书
销售助理岗位职责
2015/02/11 职场文书
如何用JS实现网页瀑布流布局
2021/04/24 Javascript