angularJs--$on、$emit和$broadcast的使用

標籤：string   function   target   get   str   style   oct   bsp   屬性   

• $emit只能向parent controller傳遞event與data
• $broadcast只能向child controller傳遞event與data
• $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 child

ChildCtrl parent

$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的使用