angularjs中作用域事件的路由与广播

angularjs事件传播方式

angularjs作用域事件相关的方法：$on()，$emit()，$broadcast()

angularjs作用域支持两种事件传播方式

1. 事件从子作用域路由到父作用域（$emit()函数）
2. 事件从父作用域广播到所有的子作用域中（$broadcast()函数）

angularjs事件传播

angularjs作用域对象提供的$emit()方法用于将子作用域的事件路由到父作用域，如果在父作用域注册的事件监听器中不调用event事件对象的stopPropagation()方法，事件将一直向上传播。stopPropagation()方法事阻止事件向上冒泡。

如若有如下层级关系：

	<div id = "parent" ng-controller = "ParentController">
		父作用域
		<div id="child" ng-controller="ChildController">
			子作用域
			<button ng-click="postEvent()">Emit</button>
		</div>
	</div>

如上面html代码，通过ng-controller初始化了两个作用域，一个父作用域，一个子作用域。可以在子作用域中通过作用域的$emit()方法实现一个事件从子作用域到父作用域的路由，$emit()第一个参数为事件名称，后面可以传入一个或则多个参数，这些参数能够被传递到副作用域的监听器中。

		var app = angular.module("eventModule",[]);
		app.controller('ParentController',function($scope){
			//接收事件
			$scope.$on("infoEvent",function(event,data){
				console.log("接收到子作用域事件");
				console.log(data);
			})
		});
		
		app.controller('ChildController',function($scope){
			//发送事件
			$scope.postEvent = function(){
				$scope.$emit("infoEvent",{name:'Jane',age:23});
			}
		});

如上代码段，在自作用域中一个发送事件，通过$scope.$emit()路由到父作用域中，在父作用域中调用作用域的$on()方法注册一个事件监听器监听子作用域的事件。$on()接收两个参数第一个监听的事件名称，第二个为事件监听器定义部分，一个方法，接收两个参数，第一个为事件对象event，第二个为子作用域 传递的数据。

在使用$broadcast()实现父作用域事件的广播时同上述过程，广播是广播到所有的子作用域中，换句话说，一个父作用域下面的所有子作用域都可以收到父作用域广播的事件。