快捷導(dǎo)航

AngularJS $on、$emit和$broadcast的使用

更新時(shí)間：2016年09月05日 17:59:16 作者：瘋狂的原始人

本文主要介紹AngularJS $on、$emit和$broadcast的使用,這里整理了詳細(xì)的資料及簡(jiǎn)單示例代碼有興趣的小伙伴可以參考下

AngularJS中的作用域有一個(gè)非常有層次和嵌套分明的結(jié)構(gòu)。其中它們都有一個(gè)主要的$rootScope(也就說對(duì)應(yīng)的Angular應(yīng)用或者ng-app)，然后其他所有的作用域部分都是繼承自這個(gè)$rootScope的，或者說都是嵌套在主作用域下面的。很多時(shí)候，你會(huì)發(fā)現(xiàn)這些作用域不會(huì)共享變量或者說都不會(huì)從另一個(gè)原型繼承什么。

那么在這種情況下，如何在作用域之間通信呢？其中一個(gè)選擇就是在應(yīng)用程序作用域之中創(chuàng)建一個(gè)單例服務(wù)，然后通過這個(gè)服務(wù)處理所有子作用域的通信。

在AngularJS中還有另外一個(gè)選擇：通過作用域中的事件處理通信。但是這種方法有一些限制；例如，你并不能廣泛的將事件傳播到所有監(jiān)控的作用域中。你必須選擇是否與父級(jí)作用域或者子作用域通信。

$on、$emit和$broadcast使得event、data在controller之間的傳遞變的簡(jiǎn)單。

$emit只能向parent controller傳遞event與data
$broadcast只能向child controller傳遞event與data
$on用于接收event與data

例子如下

html代碼

<div ng-controller="ParentCtrl">        <!--父級(jí)-->
  <div ng-controller="SelfCtrl">       <!--自己-->
    <a ng-click="click()">click me</a>
    <div ng-controller="ChildCtrl"></div>  <!--子級(jí)-->
  </div>
  <div ng-controller="BroCtrl"></div>     <!--平級(jí)-->
</div>

js代碼

app.controller('SelfCtrl', function($scope) {
  $scope.click = function () {
    $scope.$broadcast('to-child', 'child');
    $scope.$emit('to-parent', 'parent');
  }
});

app.controller('ParentCtrl', function($scope) {
  $scope.$on('to-parent', function(event,data) {
    console.log('ParentCtrl', data);    //父級(jí)能得到值
  });
  $scope.$on('to-child', function(event,data) {
    console.log('ParentCtrl', data);    //子級(jí)得不到值
  });
});

app.controller('ChildCtrl', function($scope){
  $scope.$on('to-child', function(event,data) {
    console.log('ChildCtrl', data);     //子級(jí)能得到值
  });
  $scope.$on('to-parent', function(event,data) {
    console.log('ChildCtrl', data);     //父級(jí)得不到值
  });
});

app.controller('BroCtrl', function($scope){ 
  $scope.$on('to-parent', function(event,data) { 
    console.log('BroCtrl', data);     //平級(jí)得不到值 
  }); 
  $scope.$on('to-child', function(event,data) { 
    console.log('BroCtrl', data);     //平級(jí)得不到值 
  }); 
});

最終結(jié)果

ParentCtrl parent

ChildCtrl child

$emit和$broadcast可以傳多個(gè)參數(shù)，$on也可以接收多個(gè)參數(shù)。

在$on的方法中的event事件參數(shù)，其對(duì)象的屬性和方法如下

事件屬性	目的
event.targetScope	發(fā)出或者傳播原始事件的作用域
event.currentScope	目前正在處理的事件的作用域
event.name	事件名稱
event.stopPropagation()	一個(gè)防止事件進(jìn)一步傳播(冒泡/捕獲)的函數(shù)(這只適用于使用`$emit`發(fā)出的事件)
event.preventDefault()	這個(gè)方法實(shí)際上不會(huì)做什么事，但是會(huì)設(shè)置`defaultPrevented`為true。直到事件監(jiān)聽器的實(shí)現(xiàn)者采取行動(dòng)之前它才會(huì)檢查`defaultPrevented`的值。
event.defaultPrevented	如果調(diào)用了`preventDefault`則為true