AngularJS的學習--$on、$emit和$broadcast的使用
原文地址：http://www.cnblogs.com/CraryPrimitiveMan/p/3679552.html
AngularJS中的作用域有一個非常有層次和嵌套分明的結構。其中它們都有一個主要的$rootScope(也就說對應的Angular應用或者ng-app)，然後其他所有的作用域部分都是繼承自這個$rootScope的，或者說都是嵌套在主作用域下面的。很多時候，你會發現這些作用域不會共享變量或者說都不會從另一個原型繼承什麼。
那麼在這種情況下，如何在作用域之間通信呢？其中一個選擇就是在應用程序作用域之中創建一個單例服務，然後通過這個服務處理所有子作用域的通信。
在AngularJS中還有另外一個選擇：通過作用域中的事件處理通信。但是這種方法有一些限制；例如，你並不能廣泛的將事件傳播到所有監控的作用域中。你必須選擇是否與父級作用域或者子作用域通信。
$on、$emit和$broadcast使得event、data在controller之間的傳遞變的簡單。
$emit只能向parent controller傳遞event與data
$broadcast只能向child controller傳遞event與data
$on用於接收event與data
例子如下
<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>
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 |