在项目中，我们可能会很经常性的利用到控制器之间的相互通信，在angular中的控制器之间的相互通信有以下几种方式：
1）通过本地数据的存储localstorage,sessionstorage,
2）通过rootScope，顶级作用域
3）通过$broadcast,$on,$emit的方式进行通信
在此就讲解下如何通过第三种方式进行通信的问题：
$broadcast：顾名思义是广播的意思，一般用于父级控制器向子控制器传递信息的方法。
$emit：主要是用于子控制器向父控制器传递信息的方法。
$on：用于接收$broadcast,$emit的消息
情况一：父---->子之间的通信（$broadcast）
<script src="../angular.js"></script> <script> angular.module("app", []) .controller("child", function($scope) { $scope.$on("parentChange", function(e, m) {//参数一：监听的事件名，回调函数的参数一：以对象的形式返回相关数据，参数二：你传递的参数 $scope.change = "changed"; $scope.child = m; }) }) .controller("parent", function($scope) { $scope.$watch("parent", function(n, o) { if (n == o) { return; } $scope.$broadcast("parentChange", n) }) }) </script> <body> <div ng-controller="parent"> Parent: {{parent}} <input type="text" ng-model="parent"> <div ng-controller="child"> {{change}} Child: {{child}} </div> </div> </body>
情况二：子--->父的通信 ($emit)
<script src="../angular.js"></script> <script> angular.module("app", []) .controller("parent", function($scope) { $scope.$on("childChange", function(e, m) { $scope.change = "changed"; $scope.parent = m }) }) .controller("child", function($scope) { $scope.$watch("child", function(n, o) { if (n == o) { return; } $scope.$emit("childChange", n) }) }) </script> <body ng-controller="parent"> {{change}} Parent: {{parent}} <div ng-controller="child"> Child: {{child}} <input type="text" ng-model="child"> </div> </body>
第三种：同级的兄弟控制器之间的相互通信（要额外定义一个服务）
<script src="../angular.js"></script> <script> angular.module("app", []) .service("myServive", function($rootScope) { return { change: function(n) { $rootScope.$broadcast("valueChange", n); } } }) .controller("bro1", function($scope, myServive) { $scope.$watch("value1", function(n) { myServive.change(n); }) $scope.$on("valueChange", function(e, m) { console.log("value1"); $scope.value1 = m; }) }) .controller("bro2", function($scope, myServive) { $scope.$watch("value2", function(n) { myServive.change(n); }) $scope.$on("valueChange", function(e, m) { console.log("value2"); $scope.value2 = m; }) }) </script> <body> <div ng-controller="bro1"> <h3> value1:</h3> <input type="text" ng-model="value1"> </div> <div ng-controller="bro2"> <h3>value2:</h3> <input type="text" ng-model="value2"> </div> </body>
同级控制器之间的相互通信，比起前面两种情况确实来的稍微复杂一点，但是本质上还是利用的上一级的控制器进行通信（以服务的方式）
写这篇文章的原因就是在我的项目中我遇到了一个需求：我的页面中会用到angular-bootstrap的模态弹出框，现在要求模态框是没用内容的，通过z-index设置页面的内容（而非模态框）让其浮现到模态框上面（他有两个按钮），通过点击这两个按钮让模态框消失（已经设置模态框的backdtop:'static'）,【之前都是点击模态框“确认”，“取消”按钮才消失模态框】，现在是通过点击页面的上的两个按钮（与模态框没有联系）让它消失。
这个时候就需要通过同级控制器之间的相互通信。