AngularJS中的controller是个函数，用来向视图的作用域（$scope）添加额外的功能，我们用它来给作用域对象设置初始状态，并添加自定义行为。
当我们创建一个新的控制器时，angular.js会创建一个新的$scope对象给controller。顶级ng-app所在的层级就是$rootScope。
cotroller之间的通信本质上是当前的controller所在的$scope如何跟其他controller上的$scope进行通信。
第一种方式：
作用域嵌套的方式：angular.js在默认情况下，在当前作用域查找不到值的时候，会去上一层作用域进行查找。这种方法用的很少，但是很简单。
<div ng-controller="parentController">
<div ng-controller="childController"></div>
<a ng-click="saySometing()"></a>
</div>
app.controller('parentController',function($scope){
$scope.person={name:'wd'};
});
app.controller('childController',function($scope){
$scope.person.age = 24;
$scope.saySomething =function(){
alert($scope.person); //{name:'wd',age:24}
}
})
第二种：利用作用域传递事件。
$broadcast: 触发的事件要通知整个事件系统（允许任意作用域处理这个事件）就要向下传播。
$emit: 如果要提醒一个全局模块，需要通知更高层次的作用域时（例如$rootscope）需要把事件向上传递。
$on:作用域上使用$on进行事件监听。
app.controller('parentController',function($scope){
var unbind = $scope.$on('change',function(data){
console.log(data); //Hello
})
$scope.$on('$destory',unbind); //为了进一步提升性能，定义的事件处理函数要在作用域销毁时一起释放掉
})
app.controller('childController',function($scope){
$scope.$emit('change','Hello');
})
但是这种方式有点繁琐，定义多个事件处理函数时整个人都不好了，所以我们来改进一下
angular.module('MyApp')
.config(['$provide', function($provide){
$provide.decorator('$rootScope', ['$delegate', function($delegate){
Object.defineProperty($delegate.constructor.prototype, '$onRootScope', {
value: function(name, listener){
var unsubscribe = $delegate.$on(name, listener);
this.$on('$destroy', unsubscribe);
return unsubscribe;
},
enumerable: false
});
return $delegate;
}]);
}]);
那么我们在控制器中定义事件处理函数时：
angular.module('MyApp')
.controller('MyController', ['$scope', function MyController($scope) {
$scope.$onRootScope('someComponent.someCrazyEvent', function(){
console.log('foo');
});
}
]);
第三种方法：
定义服务：服务(service)提供了一种能在应用的整个生命周期内保持数据的方式，能够在控制器之间进行通信，且能保证数据的一致性。
angular.module('Myapp')
.factory('Data',function(){
return {data:'wd'}
});
.controller('parentController',function($scope,Data){
$scope.data =Data;
});
网友评论