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

AngularJS中的範圍有一個非常有層次和嵌套分明的結構。其中它們都有一個主要的$rootScope(也就說對應的Angular應用或者ng-app)，然後其他所有的範圍部分都是繼承自這個$rootScope的，或者說都是嵌套在主範圍下面的。很多時候，你會發現這些範圍不會共用變數或者說都不會從另一個原型繼承什麼。

那麼在這種情況下，如何在範圍之間通訊呢？其中一個選擇就是在Application 領域之中建立一個單例服務，然後通過這個服務處理所有子範圍的通訊。

在AngularJS中還有另外一個選擇：通過範圍中的事件處理通訊。但是這種方法有一些限制；例如，你並不能廣泛的將事件傳播到所有監控的範圍中。你必須選擇是否與父級範圍或者子範圍通訊。

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

1. $emit只能向parent controller傳遞event與data
2. $broadcast只能向child controller傳遞event與data
3. $on用於接收event與data
   

例子如下

html代碼

<div ng-controller="ParentCtrl">        <!--父級-->  <div ng-controller="SelfCtrl">       <!--自己-->    <a ng-click="click()">click me</a>    <div ng-controller="ChildCtrl"></div>  <!--子級-->  </div>  <div ng-controller="BroCtrl"></div>     <!--平級--></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);    //父級能得到值  });  $scope.$on('to-child', function(event,data) {    console.log('ParentCtrl', data);    //子級得不到值  });});app.controller('ChildCtrl', function($scope){  $scope.$on('to-child', function(event,data) {    console.log('ChildCtrl', data);     //子級能得到值  });  $scope.$on('to-parent', function(event,data) {    console.log('ChildCtrl', data);     //父級得不到值  });});app.controller('BroCtrl', function($scope){   $scope.$on('to-parent', function(event,data) {     console.log('BroCtrl', data);     //平級得不到值   });   $scope.$on('to-child', function(event,data) {     console.log('BroCtrl', data);     //平級得不到值   }); });

最終結果

ParentCtrl parent

ChildCtrl child

$emit和$broadcast可以傳多個參數，$on也可以接收多個參數。

在$on的方法中的event事件參數，其對象的屬性和方法如下

 

事件屬性	目的
event.targetScope	發出或者傳播原始事件的範圍
event.currentScope	目前正在處理的事件的範圍
event.name	事件名稱
event.stopPropagation()	一個防止事件進一步傳播(冒泡/捕獲)的函數(這隻適用於使用`$emit`發出的事件)
event.preventDefault()	這個方法實際上不會做什麼事，但是會設定`defaultPrevented`為true。直到事件監聽器的實現者採取行動之前它才會檢查`defaultPrevented`的值。
event.defaultPrevented	如果調用了`preventDefault`則為true

感覺比service在不同controller中通訊要方便許多~~

 以上就是對 AngularJS $on、$emit和$broadcast的資料整理，後續繼續補充相關資料，謝謝大家對本站的支援!