- $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 |