AngularJS按照发布/订阅模式设计了其事件系统，使用时需要“发布”事件，并在适当的位置“订阅”或“退订”事件，就像邮箱里面大量的订阅邮件一样，当我们不需要时就可以将其退订了。具体到开发中，对应的就是$scope和$rootScope的$emit、$broadcast和$on方法。

0、发布

$broadcast和$emit用于发布事件，他们将事件名称和事件内容发布出去，就像是高考榜单一样，事件名称相当于考生的名字，而事件内容相当于考生的成绩等信息：

$scope.$broadcast(eventName,args)
$scope.$emit(eventName,args)

1、订阅

$on用于订阅事件，事件名称是订阅的唯一标识，每个考生看榜单时都要寻找自己的名字，然后根据自己的成绩等信息决定下一步应该报考什么学校：

$scope.$on('EVENT_NAME', function(event,args){
    // balabala
});

2、退订

使用$on订阅事件时会返回一个函数，而此函数就是用来退订事件的方法，就像是考生看到了自己的成绩后禀告父母大人，“商量着”选取学校填报志愿，而此志愿单就是结束整个高考榜单的结束：

// 订阅事件返回用于退订事件的函数
var deregister = $scope.$on('EVENT_NAME', function(event,args){
    // balabala
});
// 退订事件
deregister();

3、区别

$broadcast是自上而下的广播，所有能听到的都可以对其进行反应。而$emit是自下而上的射箭，只有在箭矢的轨迹上才能对其做出反应。即从一个$scope上通过$broadcast发布的事件，他的所有后代$scope都可以对此事件做出响应；而通过$emit发布的事件，只有他的祖先$scope可以做出响应，并且其中任一祖先都可以将此事件终结掉，不让其继续传播（终止方法：event.stopPropagation()和阻止冒泡一样的方法）

4、$rootScope的$broadcast和$emit

通过$rootScope.$broadcast发布的事件可以被所有$scope接收到，包括$rootScope；$rootScope.$emit发布的事件，只能通过$rootScope.$on订阅，而其他$scope对此一无所知

当使用$rootScope.$on订阅事件时，需要手动退订事件，一般在其所处$scope的$destory事件中退订：

var destroySth = $rootScope.$on("gb001",function(event, data){
	//do sth
});
$scope.$on('$destroy',function(){
	destroySth();
});

5、栗子

登陆成功后无刷新更新用户状态：

.controller('headerSth', ['$scope','$rootScope', function($scope,$rootScope){
	$scope.isLogin = false;
	var destroyHello = $rootScope.$on("gb001",function(event, data){
		if(data.login===1){
			$scope.isLogin = true;
		}
	});
}])
.controller('page2Ctrl', ['$scope', function($scope){
	$scope.clickLogin = function(){
		$scope.$emit("gb001",{login:1});
	}
}])

相关资料