angular开发控制器之间的通信

一、指令与控制器之间通信，无非是以下几种方法：

　　基于scope继承的方式
　　基于event传播的方式
　　service的方式（单例模式）

二、基于scope继承的方式：

　　最简单的让控制器之间进行通信的方法是通过scope的继承。假设有两个控制器Parent、Child，Child 在 Parent 内，那Child 可以称为控制器Parent的子控制器，它将继承父控制器Parent的scope。这样，Child就可以访问到Parent的scope中的所有函数和变量了。

　　需要注意的是，由于scope的继承是基于Js的原型继承，如果变量是基本类型的，那在Child中的修改（写），有可能会导致Parent中的数据变脏。

　　例子：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>基于scope继承的方式</title>

</head>

<body ng-app = "myApp">

    <div ng-controller = "parent">

            <p>引用类型：{{obj.value}}</p>

            <p>引用类型：{{value}}</p>

            <a href="javascript:;" ng-click = "parent('parent')">点我</a>

        <div ng-controller="child">

            <p>引用类型：{{obj.value}}</p>

            <p>引用类型：{{value}}</p>

            <a href="javascript:;" ng-click = "child('child')">点我</a>

        </div>

    </div>

    <script type="text/javascript" src='http://cdn.staticfile.org/angular.js/1.3.0-beta.13/angular.min.js'></script>

    <script>

        var app = angular.module("myApp",[],function(){console.log("start")});

        app.controller("parent",function($scope){

            $scope.parent = function(newchild){

                // 这里不能都单独写成$scope.obj={value:newchild}

                $scope.obj={value:newchild};

                $scope.value = newchild;

            }

        });

        app.controller("child",function($scope){

            $scope.child = function(newchild){

                $scope.value = newchild;

                $scope.obj.value=newchild;

            }

        });

    </script>

</body>

</html>

三、基于事件的方式：

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

　　子到父通过 $emit 注册事件，例子：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>基于事件传播子到父</title>

</head>

<body ng-app = "myApp">

    <h3>$on,$emit,$boardcast这几个方式来实现，其中$on表示事件监听，$emit表示向父级以上的 作用域触发事件， $boardcast表示向子级以下的作用域广播事件</h3>

    <div ng-controller = "parent">

            <p>引用类型：{{value}}</p>

        <div ng-controller="child">

            <a href="javascript:;" ng-click = "child('child')">子传值到父</a>

        </div>

    </div>

    <script type="text/javascript" src='http://cdn.staticfile.org/angular.js/1.3.0-beta.13/angular.min.js'></script>

    <script>

        var app = angular.module("myApp",[],function(){console.log("start")});

        app.controller("parent",function($scope){

            $scope.$on("pfan",function(e,data){

                $scope.value = data;

            })

        });

        app.controller("child",function($scope){

            $scope.child = function(newchild){

                $scope.value = newchild;

                $scope.$emit("pfan",$scope.value)

            }

        });

    </script>

</body>

</html>

　　父到子通过$broadcast注册事件，但其实感觉有点多余，本事父就是可以共享给子的，例子：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>基于事件传播父到子</title>

</head>

<body ng-app = "myApp">

    <h3>$on,$emit,$boardcast这几个方式来实现，其中$on表示事件监听，$emit表示向父级以上的 作用域触发事件， $boardcast表示向子级以下的作用域广播事件</h3>

    基于事件传播父到子，这里本事父就可以到子，感觉有点多余

    <div ng-controller = "parent">

            <a href="javascript:;" ng-click = "parent('child')">子传值到父</a>    

        <div ng-controller="child">

            <p>引用类型：{{value}}</p>

        </div>

    </div>

    <script type="text/javascript" src='http://cdn.staticfile.org/angular.js/1.3.0-beta.13/angular.min.js'></script>

    <script>

        var app = angular.module("myApp",[],function(){console.log("start")});

        app.controller("parent",function($scope){

            $scope.parent = function(newchild){

                $scope.value = newchild;

                $scope.$broadcast("pfan",$scope.value)

            }

        });

        app.controller("child",function($scope){

            $scope.$on("pfan",function(e,data){

                $scope.value = data;

            })

        });

    </script>

</body>

</html>

　　同级之间

　　拥有同个父scope的子级scope之间，也就是兄弟/相邻scope之间的通信，其实是借助共同父级传递消息的：

　　子级scope中有谁想传消息了，$emit 一个给“奶爸”
　　然后通过“奶爸” $broadcast 给所有孩子这个相同的信息，当然发出信息的那个可以选择是否要忽略掉自己发出的信息

四、angular服务的方式：

　　在ng中服务是一个单例，所以在服务中生成一个对象，该对象就可以利用依赖注入的方式在所有的控制器中共享。参照以下例子，在一个控制器修改了服务对象的值，在另一个控制器中获取到修改后的值：

var app = angular.module('myApp', []);

app.factory('instance', function(){

    return {};

});

app.controller('MainCtrl', function($scope, instance) {

  $scope.change = function() {

       instance.name = $scope.test;

  };

});

app.controller('sideCtrl', function($scope, instance) {

    $scope.add = function() {

        $scope.name = instance.name;

    };

});

//html

<div ng-controller="MainCtrl">

     <input type="text" ng-model="test" />

     <div ng-click="change()">click me</div>

</div>

<div ng-controller="sideCtrl">

    <div ng-click="add()">my name {{name}}</div>

</div>

参考资料：

　　AngularJs开发——控制器间的通信

　　angular开发控制器之间的通信

　　AngularJS: 使用Scope时的6个陷阱