背景
用 AngularJS 进行开发，基本上都会遇到 Controller 之间通信的问题。从本质上讲，所谓Controller 之间的通信就是Controller之间的数据交互，也可以理解为页面之间的交互。 之前的篇章讲到过，页面跳转与数据传递，便是这个意思。
在 Angular 中，Controller 之间通信的方式有多种。 比如： 作用域的继承，注入服务，事件广播与监听等。
其中，最容易理解的方式便是广播与监听模式。因为这种模式，并不是 AngularJS所独有，广播设计模式在其他框架中（iOS、Android）也是常用的。
这里，以广播和监听模式，设计一个应用示例：
通过广播/监听模式，实现Controller 之间的通信与传值
借助 $rootScope
每个 Angular 应用，默认都有一个根作用域 $rootScope， 根作用域位于最顶层，从它往下挂着各级作用域。
所以，如果子控制器直接使用 $rootScope 广播和接收事件，那么就可实现同级之间的通信。
构建视图页面 （index.html）
<!DOCTYPE html>
<html>
<head>
<title> AngularJS ui-router example </title>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css' />
<script type="text/javascript" src= "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" >
</script>
<script type="text/javascript" src= "http://apps.bdimg.com/libs/angular-ui-router/0.2.15/angular-ui-router.js" >
</script>
<script type="text/javascript" src="app.js" > </script>
</head>
<body ng-app= "myApp">
<div ng-controller="CtrlA">
<input class="form-control" type="text" ng-model="input_a_value" ng-change="func_a_changed()">
</div>
<div ng-controller="CtrlB">
<input class="form-control" type="text" ng-model="input_b_value" ng-change="func_b_changed()">
</div>
</body>
</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 之间的数据交互
参考书： 《 全栈开发之道：MongoDB+Express+AngularJS+Node.js 》
更多全栈技术，请关注微信公众号： “全栈工程师的早读课”，每天早8:00 准时推送技术文章。
网友评论