angularjs 中 broadcast與emit $on的處理思想

• 對於Angular的controll之間的通訊方式，我們可以常見有有幾種方式，如可以通過rootScope，還有通過scope的作用域，當然還有一種個人覺得很好的通訊方式就是broadcast,emit,$on來監聽；

• broadcast方式與emit方式的區別
  broadcast方式一種廣播模式，就是父級發送一個消息時間，子級controller裡面監聽這個消息事件的函數就會執行；emit與$broadcast方式相反，是子級controller釋出一個訊息事件，父級controller監聽的函式執行；
  兩種方式平級的controller都不能收到訊息事件，注意同一個controller裡面都是可以捕獲到訊息事件的;
  父子級controller

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

javascript如下：

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

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

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

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

同一個controller裡面

    <div ng-controller="Ctrl">
        <h1>{{message1}}</h1>
        <h2>{{message2}}</h2>
    </div>

js程式碼：

    angular.module('app', [])
        .controller('Ctrl', ['$scope', function($scope) {
            $scope.$on('msg1', function(e, msg) {
                $scope.message1 = msg;
            });
            $scope.$on('msg2', function(e, msg) {
                $scope.message2 = msg;
            });
            $scope.$emit('msg1', 'Hello Angular!');
            $scope.$broadcast('msg2', 'Angular is magic!')
        }]);

注意：
相比 emit冒泡方法，broadcast廣播方法要消耗更多的資源，因為廣播事件會深入到該作用域的所有子孫作用域，跟單路徑冒泡的emit消耗的資源完全不是數量級。故而對於包含成數千子作用域又要追求較高性能的情況，可能需要考慮一下是否棄用broadcast方法