Angular JS 中 ng-controller 值复制和引用复制
2024-08-30 12:23:44
我们知道在使用ng-app或者ng-controller指令的时候,都会创建一个新的作用域($rootScope或者是$scope),并且在使用ng-controller指令创建的作用域会继承父级作用域($rootScope或者是$scope)所有的方法和属性。
但是这里继承的属性就有一些学问了
运行如下代码:
html
<div ng-controller="SomeController">
{{ someBareValue }}
<button ng-click="someAction()">Parent button</button>
<div ng-controller="ChildController">
{{ someBareValue }}
<button ng-click="childAction()">Child button</button>
</div>
</div>
js
angular.module('myApp', [])
.controller('SomeController', function($scope) {
$scope.someBareValue = 'hello computer';
$scope.someAction = function() {
$scope.someBareValue = 'hello human, from parent';
};
})
.controller('ChildController', function($scope) {
$scope.childAction = function() {
$scope.someBareValue = 'hello human, from child';
};
});
初始加载完,父子作用域显示同样的值
当点击Parent button的时候,可以看到父子作用域同时变化
然后点击Child button的时候,子作用域的值更新了
而后再次点击Parent button的时候,发现父作用域更新了,但是子作用域却不在变化。
这是因为,父子作用域间的继承是通过的是一个 字符串 数字或者布尔值来实现的,这就是JS的值复制。
再运行如下代码:
html
<div ng-controller="SomeController">
{{ someModel.someValue }}
<button ng-click="someAction()">Parent button</button>
<div ng-controller="ChildController">
{{ someModel.someValue }}
<button ng-click="childAction()">Child Button</button>
</div>
</div>
js
angular.module('myApp', [])
.controller('SomeController', function($scope) {
$scope.someModel = {
someValue: 'hello computer'
}
$scope.someAction = function() {
$scope.someModel.someValue = 'hello human, from parent';
};
})
.controller('ChildController', function($scope) {
$scope.childAction = function() {
$scope.someModel.someValue = 'hello human, from child';
};
});
可以看到这个例子和上面例子的区别主要在于,子作用域继承自父作用域是通过一个对象someModel实现的,运行该例子。
初始完成之后,父子作用域显示相同字符串。
然后无论点击Parent Button 还是Child Button,父子作用域都同步显示相同的字符串。
这是因为,父子作用域间的继承是通过的是一个 对象 来实现的,这就是JS的引用复制。
此外,除了ng-controller之外
ng-include
ng-switch
ng-repeat
ng-view
ng-if
都是有同样的特性。
最新文章
- asp.net MVC4 异步文件上传
- No identities are available for signing的解决方法
- DWZ中Tree树形菜单的treeCheck如何获取返回值解决方案
- hdu 3450 树状数组
- ios项目绕过证书访问https程序
- Python 中的 TK编程
- Android 使用HttpClient方式提交POST请求
- arm+linux 裸机环境搭建之安装工具篇(eclipse)
- Intellij IDEA 常用 设置 及 快捷键 (持续更新)
- python爬虫抓站的一些技巧总结
- php.ini与php-fpm.conf配置文件的区别
- CentOS安装配置MySql数据库
- JDBC开源框架:DBUtils使用入门
- 测试库的接收到的数据是否完整(jrtplib为列)
- 淘宝NPM源的使用
- Android图表库MPAndroidChart(七)—饼状图可以再简单一点
- boston_housing-多分类问题
- Vue之状态管理(vuex)与接口调用
- 将爬取的数据保存到mysql中
- Oracle迁移至PostgreSQL工具之Ora2Pg
热门文章
- 《linux内核设计与实现》阅读笔记-进程与调度
- Kafka 学习之路(五)—— 深入理解Kafka副本机制
- 【对象属性复制】BeanUtils.copyProperties(obj1, obj2);
- 【时间工具】整理下java时间换算专题
- 性能监控: SPF4J介绍
- 最新ubuntu搭建公网个人邮件服务器(基于postfix,dovecot,mysql)
- python查询elasticsearch(Query DSL) 实例
- SPOJ STC02 - Antisymmetry(Manacher算法求回文串数)
- scrapy实战7爬取搜狗微信:
- scala刷LeetCode--21 合并两个有序链表