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

为自己工作中学习到的东西做个记录，让大家看看有什么不对的地方，相互交流，仅此而已。