angularJS中的通信事件$broadcast,$emit和$on的使用方法
首页 >  Web前端 > AngularJS  > 2017年12月12日阅(1179)评(2
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});
	}
}])

相关资料

  • Angular $scope和$rootScope事件机制之$emit、$broadcast和$on
  • angularjs controler之间相互通信
  • emlog插件:基于AngularJS的emlog链接管理系统
    js中控制函数执行1次或n次的方法

    有朋自远方来...评论一下呗O(∩_∩)O哈哈~

    QQ
    昵称*
    邮箱*
    主页

    评论(2)

    1楼、天津网站建设 [回复该留言]
    2018-09-17 20:22
    感谢博主的分享,我又来了
    e起飞young Vip博主大大 [回复该留言]
    2018-09-24 23:51
    @天津网站建设:好吧