专栏首页风吹杨柳angularJS学习之路(七)---子控制器关于是引用机制还是复制机制的问题---原型继承

angularJS学习之路(七)---子控制器关于是引用机制还是复制机制的问题---原型继承

我们知道在一个应用中可以有  多个控制器,也即是控制器的嵌套  

原型继承 要弄清一点:    修改父级对象中的alue值会同时修改 子对象中的alue值,但是反过来就不行了,

angularJS 中的控制器 嵌套 采用的就是   原型继承的  机制

ps:javascript 对象要么是值复制   要么是 引用复制

首先看第一个例子:

js代码:

var app = angular.module('myApp', []);
app.controller('SomeController', function($scope) {
	// anti-pattern, bare value
	$scope.someBareValue = 'hello computer';
	// set actions on $scope itself, this is okay
	$scope.someAction = function() {
		$scope.someBareValue = 'hello human, from parent';
	};
});
app.controller('ChildController', function($scope) {
	$scope.childAction = function() {
		$scope.someBareValue = 'hello human, from child';
	};
});

HTML代码:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
	</head>

	<body>

		<div ng-app="myApp" ng-controller="SomeController">
			{{ someBareValue }}
			<button ng-click="someAction()">Communicate to child</button>
			<div ng-controller="ChildController">
				{{ someBareValue }}
				<button ng-click="childAction()">Communicate to parent</button>
			</div>
		</div>

		<script type="text/javascript" src="../js/angular.min.js"></script>
		<script type="text/javascript" src="../js/value-copy1.js"></script>
	</body>

</html>

运行结果:

hello computer  Communicate to child

hello computer  Communicate to parent

当你点击第一个按钮 : Communicate to child

显示结果如下所示:

hello human, from parent  Communicate to child

hello human, from parent  Communicate to parent

修改父对象的值,子对象也变了,

然后当你点击第二个对象的时候:Communicate to parent

显示结果如下:

hello human, from parent  Communicate to child

hello human, from child  Communicate to parent

父对象不变,子对象的值发生了变化

如果要想实现同步     就利用  引用进行 共享

下面是代码:

js代码:

var app = angular.module('myApp', []);
app.controller('SomeController', function($scope) {
	// anti-pattern, bare value
	$scope.someModel = {
		someValue: 'hello computer'
	};
	// set actions on $scope itself, this is okay
	$scope.someAction = function() {
		$scope.someModel.someValue = 'hello human, from parent';
	};
});
app.controller('ChildController', function($scope) {
	$scope.childAction = function() {
		$scope.someModel.someValue = 'hello human, from child';
	};
});

下面是HTML代码:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
	</head>

	<body>
		<div ng-app="myApp" ng-controller="SomeController">
			{{ someModel.someValue }}
			<button ng-click="someAction()">Communicate to child</button>
			<div ng-controller="ChildController">
				{{ someModel.someValue }}
				<button ng-click="childAction()">Communicate to parent</button>
			</div>
		</div>

		<script type="text/javascript" src="../js/angular.min.js"></script>
		<script type="text/javascript" src="../js/value-copy2.js"></script>
	</body>

</html>

下面是效果:

hello human, from child  Communicate to child

hello human, from child  Communicate to parent

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • angularJS学习之路(八)---ng-switch

    这个指令   和  ng-switch-when 以及  on="name"一起使用    

    wust小吴
  • angularJS学习之路(五)---表达式

    AngularJS 表达式把数据绑定到 HTML,这与 ng-bind 指令有异曲同工之妙。

    wust小吴
  • 解决使用百度地图默认定位是北京的问题

    这个大家应该是经常想要解决的问题,因为我肯定是加载当前的位置啊,特别是在网突然断,或者查找失败的时候,他就是北京位置,这个很烦,后来发现百度官方给的demo里面...

    wust小吴
  • 手把手用Python教你如何发现隐藏wifi

    细心的小伙伴可能知道,小编之前发布过一篇使用Python发现酒店隐藏的针孔摄像头,没有来得及上车的小伙伴也没关系,可以戳这篇文章了解一下:使用Pyhton带你...

    Python进阶者
  • C++核心准则ES.26: 不要将一个变量用于两个无关的用途

    As an optimization, you may want to reuse a buffer as a scratch pad, but even th...

    面向对象思考
  • 深入iOS系统底层之汇编语言

    要想完全的了解一个系统唯一的方法就是去阅读这个系统的源代码实现!这个原则对于一个iOS程序员也是如此。很幸运的是我们现在处于一个开源代码迸发的美好时代(这里要感...

    欧阳大哥2013
  • Python 实现双向链表(图解)

    双向链表也叫双链表,是链表的一种,它的每个数据结点中都有两个指针,分别指向直接后继和直接前驱。所以,从双向链表中的任意一个结点开始,都可以很方便地访问它的前驱结...

    py3study
  • CentOS6系统编译部署LAMP(Linux, Apache, MySQL, PHP)环境

    我们一般常规的在Linux服务器中配置WEB系统会用到哪种WEB引擎呢?Apache还是比较常用的引擎之一。所以,我们在服务器中配置LAMP(Linux, A...

    老蒋
  • Mac 设置 Home / End 键

    苹果电脑的键盘是没有 Home / End 两个键的,通常是使用 Command + -> 和 Command + <- 使用非常不便。 下面介绍一下如果设置 ...

    netkiller old
  • 从零开始学 Web 之 移动Web(六)响应式布局

    1、固定宽度布局:为网页设置一个固定的宽度,通常以px做为长度单位,常见于PC端网页。

    Daotin

扫码关注云+社区

领取腾讯云代金券