AngularJS实战之Controller之间的通信

柳絮飞祭奠

浏览: 162287 次
性别:
来自: 重庆

最近访客更多访客>>

xx5333

henxingliwang

lxin410

horsehome

博主相关

博客

微博

相册

留言

关于我

博客专栏

: Angularjs实战
浏览量：19156

文章分类

社区版块

存档分类

博客分类：

AngularJS

AngularJS Controller

我们时常会在不同controller之间进行通信，接下来就介绍三种controller之间的通信方式

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

<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>

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

二、使用SERVICES（服务）来实现值的传递

我们首先来创建一个module（模块）
var lxApp = angular.module("lxApp", []);

接下来创建一个新的服务，服务里面定义一个鱼的数组，然后在使用addFish 方法添加鱼

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

接下来是controller和html的创建

<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));

		};
	});

展示点击父级的div调用父作用域的方法添加鱼，点击子集调用子集作用域的方法获得鱼

三、使用作用域进行controller的通信
div：

<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>

controller：

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

		};
	});

效果

这里我们会看到在父级定义的name在子集里面也可以获取到，这是AngularJS作用域机制，当我们调用子集的方法打印$scope.name,这时候会一直往父级向上的作用域中到$rootScope找name，所以这时候会打印出name。
最后就是可以使用根作用域$rootScope来获取不同controller的值。

AngularJS监听数组变化

AngularJS的$location基本用法和注意事项

AngularJS 无限滚动加载数据控件 ngInfiniteScroll

AngularJS实战之ng-repeat的详细用法

ng-show和ng-if的区别和使用场景

AngularJS实战之路由ui-view传参

AngularJS实战之filter的使用二

AngularJS实战之filter的使用一

AngularJS实战之路由ui-view

查看图片附件

0
顶

0
踩

分享到：

js实现百度搜索框滑动固定顶部 | Jquery获取选中的文本值

2017-10-22 23:13
浏览 1360
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论