AngularJS 中 Controller 之间的通信（一）

背景

用 AngularJS 进行开发，基本上都会遇到 Controller 之间通信的问题。从本质上讲，所谓Controller 之间的通信就是Controller之间的数据交互，也可以理解为页面之间的交互。 之前的篇章讲到过，页面跳转与数据传递，便是这个意思。

在 Angular 中，Controller 之间通信的方式有多种。 比如： 作用域的继承，注入服务，事件广播与监听等。

其中，最容易理解的方式便是广播与监听模式。因为这种模式，并不是 AngularJS所独有，广播设计模式在其他框架中（iOS、Android）也是常用的。

这里，以广播和监听模式，设计一个应用示例：

通过广播/监听模式，实现Controller 之间的通信与传值

借助 $rootScope

每个 Angular 应用，默认都有一个根作用域 $rootScope， 根作用域位于最顶层，从它往下挂着各级作用域。

所以，如果子控制器直接使用 $rootScope 广播和接收事件，那么就可实现同级之间的通信。

构建视图页面 （index.html）

创建视图控制器 (app.js)

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

app.controller('CtrlA', ['$scope', '$rootScope', function($scope, $rootScope){
    $scope.func_a_changed = function(){
        // 广播事件
        $rootScope.$broadcast('name_a_changed', $scope.input_a_value);
    }
     $rootScope.$on('name_b_changed', function(event, data){
         $scope.input_a_value = data;
     })
}]);

app.controller('CtrlB', ['$scope', '$rootScope', function($scope, $rootScope){
    
     $scope.func_b_changed = function(){
         $rootScope.$broadcast('name_b_changed', $scope.input_b_value);
     }
    // 监听事件
    $rootScope.$on('name_a_changed', function(event, data){
        $scope.input_b_value = data;
    })
}]);

运行结果

有2个 input 输入框， 当其中的一个输入框内容发生变化时，另一个输入框的内容会有相应的变化。 如图所示

AngularJS Controller 之间的数据交互

---

AngularJS ui-router的应用场景

参考书： 《 全栈开发之道：MongoDB+Express+AngularJS+Node.js 》

---

更多全栈技术，请关注微信公众号： “全栈工程师的早读课”，每天早8:00 准时推送技术文章。