AngularJS控制器controller之间通信

关于控制器如何通信的问题，总的来说，angular控制器通信的方式有三种： 

1、利用作用域继承的方式。即子控制器继承父控制器中的内容；

2、基于事件的方式。即$on,$emit,$boardcast这三种方式；

3、angular服务的方式。写一个服务的单例然后通过注入来使用。

一、利用作用域的继承方式

由于作用域的继承是基于js的原型继承方式，所以这里分为两种情况：

（1）基本类型

当作用域上面的值为基本类型的时候，修改父作用域上面的值会影响到子作用域，反之，修改子作用域只会影响子作用域的值，不会影响父作用域上面的值。

// js

var AppModule = angular.module("AppModule", []);
AppModule.controller("parentCtrl", ["$scope", function ($scope) {
    $scope.param = "parentParam1";
    $scope.changeParentParam = function(){
        $scope.param = "parentParam2";
    };
}]);
AppModule.controller("childCtrl", ["$scope", function ($scope) {
    $scope.changeChildParam = function(){
        $scope.param = "childParam2";
    };
}]);

// html

<div ng-controller="parentCtrl">
    <h3>1.利用作用域继承的方式--基本类型</h3>
    <p>parentCtrl的param:{{param}}</p>
    <button ng-click="changeParentParam()">改变parentCtrl的param值</button>
    <div ng-controller="childCtrl">
        <p>childCtrl的param:{{param}}</p>
        <button ng-click="changeChildParam()">改变childCtrl的param值</button>
    </div>
</div>

（2）对象

如果需要父作用域与子作用域共享一个值的话，就需要用到后面一种，即作用域上的值为对象，任何一方的修改都能影响另一方，这是因为在js中对象都是引用类型。

// js

var AppModule = angular.module("AppModule", []);
AppModule.controller("parentCtrl", ["$scope", function ($scope) {
    $scope.param = {val: "parentParam1"};
    $scope.changeParentParam = function(){
        $scope.param.val = "parentParam2";
    };
}]);
AppModule.controller("childCtrl", ["$scope", function ($scope) {
    $scope.changeChildParam = function(){
        $scope.param.val = "childParam2";
    };
}]);

// html

<div ng-controller="parentCtrl">
    <h3>1.利用作用域继承的方式--对象</h3>
    <p>parentCtrl的param.val:{{param.val}}</p>
    <button ng-click="changeParentParam()">改变parentCtrl的param.val值</button>
    <div ng-controller="childCtrl">
        <p>childCtrl的param.val:{{param.val}}</p>
        <button ng-click="changeChildParam()">改变childCtrl的param.val值</button>
    </div>
</div>

二、基于事件的方式

在一般情况下基于继承的方式已经足够满足大部分情况了，但是这种方式没有实现兄弟控制器之间的通信方式，所以引出了事件的方式。基于事件的方式中我们可以用$on、$emit、$boardcast这几个方式来实现，其中$on表示事件监听，$emit表示向父级以上的作用域触发事件， $broadcast表示向子级以下的作用域广播事件。

（1）向上传播事件$emit

// js

var AppModule = angular.module("AppModule", []);
AppModule.controller("parentCtrl", ["$scope", function ($scope) {
    $scope.param = "parentParam";
    $scope.$on("childToParent", function(e, newParam){
        $scope.param = newParam;
    });
}]);
AppModule.controller("childCtrl", ["$scope", function ($scope) {
    $scope.param = "childParam";
    $scope.$on("childToParent", function(e, newParam){
        $scope.param = newParam;
    });
}]);
AppModule.controller("grandChildCtrl", ["$scope", function ($scope) {
    $scope.param = "grandChildParam";
    $scope.upward = function() {
        $scope.$emit('childToParent', $scope.param);
    }
}]);

// html

<div ng-controller="parentCtrl">
    <p>parentCtrl的param:{{param}}</p>
    <div ng-controller="childCtrl">
        <p>childCtrl的param:{{param}}</p>
        <div ng-controller="grandChildCtrl">
            <p>grandChildCtrl的param:{{param}}</p>
            <button ng-click="upward()">向父级以上传播事件</button>
        </div>
    </div>
</div>

（2）向下广播事件$broadcast

// js

var AppModule = angular.module("AppModule", []);
AppModule.controller("parentCtrl", ["$scope", function ($scope) {
    $scope.param = "parentParam";
    $scope.$on("parentToChild", function(e, newParam){
        $scope.param = newParam;
    });
}]);
AppModule.controller("childCtrl", ["$scope", function ($scope) {
    $scope.param = "childParam";
    $scope.downward = function() {
        $scope.$broadcast("parentToChild", $scope.param);
    };
}]);
AppModule.controller("grandChildCtrl", ["$scope", function ($scope) {
    $scope.param = "grandChildParam";
    $scope.$on("parentToChild", function(e, newParam){
        $scope.param = newParam;
    });
}]);

// html

<div ng-controller="parentCtrl">
    <p>parentCtrl的param:{{param}}</p>
    <div ng-controller="childCtrl">
        <p>childCtrl的param:{{param}}</p>
        <button ng-click="downward()">向子级以下传播事件</button>
        <div ng-controller="grandChildCtrl">
            <p>grandChildCtrl的param:{{param}}</p>
        </div>
    </div>
</div>

（3）兄弟之间广播事件

从(1)，(2)的用法我们可以引申出一种用于兄弟控制器间进行通信的方法。首先一个兄弟控制器中向父作用域触发一个事件，然后在父作用域中监听事件，再广播给子作用域，这样通过事件携带的参数，实现了数据经过父作用域，在兄弟作用域之间传播。注意：通过父元素作为中介进行传递的话，兄弟元素用的事件名不能一样，否则会进入死循环。

// js

var AppModule = angular.module("AppModule", []);
AppModule.controller("parentCtrl", ["$scope", function ($scope) {
    $scope.param = "parentParam";
    $scope.$on("childToParent", function(e, newParam){
        $scope.param = newParam;
        //向下传播
        $scope.$broadcast("parentToChild", $scope.param);
    });
}]);
AppModule.controller("childCtrl1", ["$scope", function ($scope) {
    $scope.param = "childParam";
    $scope.levelWard = function() {
        //向上传播
        $scope.$emit("childToParent", $scope.param);
    };
}]);
AppModule.controller("childCtrl2", ["$scope", function ($scope) {
    $scope.param = "grandChildParam";
    $scope.$on("parentToChild", function(e, newParam){
        $scope.param = newParam;
    });
}]);

// html

<div ng-controller="parentCtrl">
    <p>parentCtrl的param:{{param}}</p>
    <div ng-controller="childCtrl1">
        <p>childCtrl1的param:{{param}}</p>
        <button ng-click="levelWard()">向兄弟控制器传播事件</button>
    </div>
    <div ng-controller="childCtrl2">
        <p>childCtr2的param:{{param}}</p>
    </div>
</div>

三、angular服务的方式

在ng中服务是一个单例，所以在服务中生成一个对象，该对象就可以利用依赖注入的方式在所有的控制器中共享。

// js

var AppModule = angular.module("AppModule", []);
AppModule.factory("appFactory", function(){
    return {
        param: "appFactory"
    };
});
AppModule.controller("parentCtrl", ["$scope", "appFactory", function ($scope, appFactory) {
    $scope.param = appFactory.param;
}]);
AppModule.controller("childCtrl1", ["$scope", "appFactory", function ($scope, appFactory) {
    $scope.param = "childCtrl1Param";
    $scope.setParam = function() {
        appFactory.param = $scope.param;
    };
}]);
AppModule.controller("childCtrl2", ["$scope", "appFactory", function ($scope, appFactory) {
    $scope.param = "childCtrl2Param";
    $scope.getParam = function() {
        $scope.param = appFactory.param;
    };
}]);

// html

<div ng-controller="parentCtrl">
    <p>parentCtrl的param:{{param}}</p>
    <div ng-controller="childCtrl1">
        <p>childCtrl1的param:{{param}}</p>
        <label>
            <input ng-model="param"/>
        </label>
        <button ng-click="setParam()">设置appFactory服务的param</button>
    </div>
    <div ng-controller="childCtrl2">
        <p>childCtr2的param:{{param}}</p>
        <button ng-click="getParam()">获取appFactory服务的param</button>
    </div>
</div>