AngularJS实战之Controller之间的通信

最新推荐文章于 2024-04-18 10:11:33 发布

柳絮飞祭奠

最新推荐文章于 2024-04-18 10:11:33 发布

阅读量112

点赞数

分类专栏： AngularJS 文章标签： AngularJS Controller

AngularJS 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

[color=red][size=x-large]我们时常会在不同controller之间进行通信，接下来就介绍三种controller之间的通信方式[/size][/color]

[color=red][size=x-large]一、使用$on、$emit和$broadcast进行controller通信[/size][/color]
虽然AngularJS是不推荐使用嵌套controller的使用，但是会有场景使用到父子controller传值的情况
[size=medium]$on、$emit和$broadcast使得event、data在controller之间的传递变的简单。
$emit：子传父传递event与data
$broadcast：父传子 child controller传递event与data
$on：监听或接收数据。。用于接收event与data[/size]
例子：

<body>
	<div ng-controller="parentController">
		<div ng-click="parent_onclick()" style="background-color: green;">我是父亲{{parent}}</div>
		<div ng-controller="childController">
			<div ng-click="child_onclick()" style="background-color: red;">我是子集{{child}}</div>
		</div>
	</div>
</body>
<script type="text/javascript" src="../plugins/angular/angular.js"></script>
<script type="text/javascript">
	var lxApp = angular.module("lxApp", []);
	lxApp.controller("parentController", function($scope) {
			$scope.$on("sendParent", function(event, data) {
				$scope.parent = data;
			});
		$scope.parent_onclick = function() {
			$scope.$broadcast('sendChild', '我给子控制器传递数据');
		};
	}).controller("childController", function($scope) {
		$scope.$on("sendChild", function(event, data) {
			$scope.child = data;
		});
		$scope.child_onclick = function() {
			$scope.$emit('sendParent', '我给父级传递数据');

		};
	});
</script>

[size=medium]你会发现点击父级的div会使用$scope.$broadcast传递'sendChild'到子集，子集也会使用$on来监听父级传递的值。熟悉一下即可使用这种传值方式。[/size]

[color=red][size=x-large]二、使用SERVICES（服务）来实现值的传递[/size][/color]

[align=center][size=medium]我们首先来创建一个module（模块）
var lxApp = angular.module("lxApp", []);[/size][/align]
[size=medium]
接下来创建一个新的服务，服务里面定义一个鱼的数组，然后在使用addFish 方法添加鱼[/size]

lxApp.service('lxAppService', function($rootScope) {
		var service = {
			fishs : [ {
				title : "鲨鱼",
				area : "sea"
			}, {
				title : "鲸鱼",
				area : "sea"
			} ],
			addFish : function(fish) {
				service.fishs .push(fish);
			}
		};
		return service;
	});

[size=medium]接下来是controller和html的创建[/size]

<div ng-controller="parentController">
		<div ng-click="parent_onclick()" style="background-color: green;">我要向大海添加鱼</div>
		<div ng-controller="childController">
			<div ng-click="child_onclick()" style="background-color: red;">我要获得鱼</div>
		</div>
	</div>

 lxApp.controller("parentController", function($scope,lxAppService) {
		$scope.parent_onclick = function() {
			lxAppService.addFish({
				title : "海豚",
				area : "sea"
			} );
			alert(lxAppService.fishs);
		};
	}).controller("childController", function($scope,lxAppService) {
		$scope.child_onclick = function() {
			alert(angular.toJson(lxAppService.fishs));

		};
	});

[size=medium]展示点击父级的div调用父作用域的方法添加鱼，点击子集调用子集作用域的方法获得鱼[/size]

[img]http://dl2.iteye.com/upload/attachment/0127/4880/d0f67889-2ee0-3afe-8419-858c588fa572.png[/img]
[color=red][size=x-large]
三、使用作用域进行controller的通信[/size][/color]
[size=medium]div：[/size]

<div ng-controller="parentController">
		<div  style="background-color: green;">我是父级</div>
		<div ng-controller="childController">
			<div ng-click="child_onclick()" style="background-color: red;">我是获得父级的名字</div>
		</div>
	</div>

[size=medium]controller：[/size]

 lxApp.controller("parentController", function($scope) {
			$scope.name="1212";
	}).controller("childController", function($scope,$rootScope) {
		$scope.child_onclick = function() {
			alert($scope.name);

		};
	});

[size=medium]
效果[/size]

[img]http://dl2.iteye.com/upload/attachment/0127/4883/aff0a7cb-d5dc-3d13-92b9-975d7a391fcc.png[/img]
[size=medium]
这里我们会看到在父级定义的name在子集里面也可以获取到，这是AngularJS作用域机制，当我们调用子集的方法打印$scope.name,这时候会一直往父级向上的作用域中到$rootScope找name，所以这时候会打印出name。
最后就是可以使用根作用域$rootScope来获取不同controller的值。
[/size]

[url=http://1197581932.iteye.com/blog/2397237]AngularJS监听数组变化[/url]

[url=http://1197581932.iteye.com/blog/2396472]AngularJS的$location基本用法和注意事项[/url]

[url=http://1197581932.iteye.com/blog/2396251]AngularJS 无限滚动加载数据控件 ngInfiniteScroll[/url]

[url=http://1197581932.iteye.com/blog/2396246]AngularJS实战之ng-repeat的详细用法[/url]

[url=http://1197581932.iteye.com/blog/2395956]ng-show和ng-if的区别和使用场景[/url]

[url=http://1197581932.iteye.com/blog/2391037]AngularJS实战之路由ui-view传参[/url]

[url=http://1197581932.iteye.com/blog/2391031]AngularJS实战之filter的使用二[/url]

[url=http://1197581932.iteye.com/blog/2391029]AngularJS实战之filter的使用一[/url]

[url=http://1197581932.iteye.com/blog/2390214]AngularJS实战之路由ui-view[/url]

柳絮飞祭奠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS实战之Controller之间的通信

[color=red][size=x-large]我们时常会在不同controller之间进行通信，接下来就介绍三种controller之间的通信方式[/size][/color][color=red][size=x-large]一、使用$on、$emit和$broadcast进行controller通信[/size][/color]虽然AngularJS是不推荐使用嵌套control...
复制链接

扫一扫

专栏目录