angularjs $broadcast $emit $on 事件觸發controller間的值傳遞

使用angularjs，發現controller間的值傳遞，比較麻煩的，之後幾篇文章會陸續說幾種方法。

一，angularjs $broadcast $emit $on的處理思想

在一個controller裏面經過事件觸發一個方法，在方法裏面經過$broadcast或$emit來定義一個變量，在父，子controller裏面經過$on來獲取。

二，實例說明angularjs $broadcast $emit $on的用法

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

2，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(d,data) {  
        console.log(data);         //父級能獲得值  
    });  
    $scope.$on('to-child', function(d,data) {  
        console.log(data);         //子級得不到值  
    });  
});  
  
app.controller('ChildCtrl', function($scope){  
    $scope.$on('to-child', function(d,data) {  
        console.log(data);         //子級能獲得值  
    });  
    $scope.$on('to-parent', function(d,data) {  
        console.log(data);         //父級得不到值  
    });  
});  
  
app.controller('BroCtrl', function($scope){  
    $scope.$on('to-parent', function(d,data) {  
        console.log(data);        //平級得不到值  
    });  
    $scope.$on('to-child', function(d,data) {  
        console.log(data);        //平級得不到值  
    });  
});

3.輸出結果

1. child  

2. parent  

四、總結：

用$broadcast賦的值，只能子級獲得值；$emit賦的值，只能父級獲得；而平級的什麼都不能獲得。