angularjs controler之間互相通信

在使用angularjs中，controller之間的互相通信非常重要，這篇部落格中記錄2中方式。

1，angularjs之間的廣播：$broadcast,$emit,$on

$broadcast的作用是将事件從父級作用域傳播至子級作用域,包括自己。格式如下：$broadcast(eventName,args)

$emit的作用是将事件從子級作用域傳播至父級作用域,包括自己，直至根作用域。格式如下：$emit(eventName,args)

$on用于在作用域中監控從子級或父級作用域中傳播的事件以及相應的資料。格式如下：$on(event,data)

上述說明中，eventName是需要監控的事件的名稱，$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代碼

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);        //平級得不到值  
    });  
});  
           

控制台輸出

child
parent
           

2.在app中定義factory，通過factory存儲資料。因為factory的生命周期跟angularjs一樣，可以通過在controller設定factory的值，然後在其他的factory中擷取起值，進而起到controller之間通信的過程。

factory定義代碼

app.factory('newTaskFactory',function () {
    var newTask = {};
    newTask.setter = function (data) {
        newTask = data;
        console.log(newTask);
    };
    newTask.getter = function () {
        return newTask;
    };
    newTask.setterObj = function (obj) {
        for(var o in obj){
            newTask[o] = obj[o];
        }
    };
    newTask.setterAttr = function (key,value) {
            newTask[key] = value;
    };
    newTask.gsetterObj = function (attr) {
        return newTask[attr];
    };
    return newTask;
});
           

在controller中可以通過setter和setterAttr來設定屬性，通過getter和getterObj開擷取屬性

總結：倆中方式各有優劣，通過廣播的方式來通信時，比較友善，但是隻能在父子controller之間來通信，限制條件比較多，通過factory通信的方式有點取巧的方式，但是，這樣在同一個頁面之間，即使沒有父子之間關鍵的controller也可以通信。

參考部落格：http://blog.51yip.com/jsjquery/1602.html

為自己工作中學習到的東西做個記錄，讓大家看看有什麼不對的地方，互相交流，僅此而已。