angular 事件的学习

文章参考

http://www.cnblogs.com/charmingyj/p/5689662.html

控制器信息传递的三种方式：

一、利用$rootScope

AngularJS中的作用域有一个非常有层次和嵌套分明的结构。其中它们都有一个主要的$rootScope(也就说对应的Angular应用或者ng-app)，然后其他所有的作用域部分都是继承自这个$rootScope的，或者说都是嵌套在主作用域下面的。很多时候，你会发现这些作用域不会共享变量或者说都不会从另一个原型继承什么。

二、利用service服务

那么在这种情况下，如何在作用域之间通信呢？其中一个选择就是在应用程序作用域之中创建一个单例服务，然后通过这个服务处理所有子作用域的通信。

三、利用时间传播

在AngularJS中还有另外一个选择：通过作用域中的事件处理通信。但是这种方法有一些限制；例如，你并不能广泛的将事件传播到所有监控的作用域中。你必须选择是否与父级作用域或者子作用域通信。

事件传播的基本对象

1、$emit 广播给父controller

2、$broadcast 是从发送者向他的子scope广播一个事件。

3、$emit 广播给父controller，父controller 是可以收到消息

4、$on 有两个参数function(event,msg) 第一个参数是事件对象，第二个参数是接收到消息信息.

<!doctype html>
<html ng-app>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="Scope1.css" />
	</head>
	<body>
		<div ng-controller="parentController">
			parentController
			<ul>
				<li ng-repeat="i in [1]" ng-controller="currentController">
					<button ng-click="emitEvent()">
						事件向上传播 $emit('parentEvent')
					</button>
					<button ng-click="broadcastEvent()">
						事件向下传播 $broadcast('sonEvent')
					</button>
					<br>
					currentController
					<ul>
						<li ng-repeat="item in [1, 2]" ng-controller="sonController">
							sonController
						</li>
					</ul>
				</li>
			</ul>
		</div>
	</body>
	<script src="js/angular-1.3.0.js"></script>
	<script src="Scope3.js"></script>
</html>

function parentController($scope) {
	// 注册事件的第一个参数是事件对象，第二个是事件传递的参数
	$scope.$on('parentEvent', function(event,paramObj) {
		console.log("parentEvent");
		console.dir(paramObj);
	});
}

function currentController($scope) {
	// 注册事件的第一个参数是事件对象，第二个是事件传递的参数
	$scope.$on('currentEvent', function(event,paramObj) {
		console.log("currentEvent");
		console.dir(paramObj);
	});

	// 触发在当前$scope的父亲$scope对象
	$scope.emitEvent = function(){
		var paramObj = {
			name : "huangbiao",
			age : 28
		};
		$scope.$emit("parentEvent", paramObj);
	};

	// 触发在当前$scope的子$scope对象
	$scope.broadcastEvent = function(){
		var paramObj = {
			name : "liumei",
			age : 23
		};
		$scope.$broadcast("sonEvent", paramObj);
	};

}

function sonController($scope) {
	// 注册事件的第一个参数是事件对象，第二个是事件传递的参数
	$scope.$on('sonEvent', function(event,paramObj) {
		console.log("sonEvent");
		console.dir(paramObj);
	});
}

angular 事件的学习

猜你喜欢