控制器之间的正确通信方式是什么?
我目前正在使用一个可怕的软糖涉及窗口:
function StockSubgroupCtrl($scope, $http) {
$scope.subgroups = [];
$scope.handleSubgroupsLoaded = function(data, status) {
$scope.subgroups = data;
}
$scope.fetch = function(prod_grp) {
$http.get('/api/stock/groups/' + prod_grp + '/subgroups/').success($scope.handleSubgroupsLoaded);
}
window.fetchStockSubgroups = $scope.fetch;
}
function StockGroupCtrl($scope, $http) {
...
$scope.select = function(prod_grp) {
$scope.selectedGroup = prod_grp;
window.fetchStockSubgroups(prod_grp);
}
}
从angular 1.5开始，它的基于组件的开发重点。组件交互的推荐方式是使用'require'属性和通过属性绑定(输入/输出)。
一个组件需要另一个组件(例如根组件)，并获得对它的控制器的引用:
angular.module('app').component('book', {
bindings: {},
require: {api: '^app'},
template: 'Product page of the book: ES6 - The Essentials',
controller: controller
});
然后你可以在你的子组件中使用根组件的方法:
$ctrl.api.addWatchedBook('ES6 - The Essentials');
这是根组件控制器函数:
function addWatchedBook(bookName){
booksWatched.push(bookName);
}
下面是一个完整的体系结构概述:组件通信
实际上，我已经开始使用post .js作为控制器之间的消息总线。
它作为消息总线有很多好处，比如AMQP风格的绑定，邮政可以集成w/ iFrames和web套接字，以及更多的东西。
我使用装饰器在$scope.$bus上设置邮政。
angular.module('MyApp')
.config(function ($provide) {
$provide.decorator('$rootScope', ['$delegate', function ($delegate) {
Object.defineProperty($delegate.constructor.prototype, '$bus', {
get: function() {
var self = this;
return {
subscribe: function() {
var sub = postal.subscribe.apply(postal, arguments);
self.$on('$destroy',
function() {
sub.unsubscribe();
});
},
channel: postal.channel,
publish: postal.publish
};
},
enumerable: false
});
return $delegate;
}]);
});
这里有一个关于这个话题的博客文章的链接。
http://jonathancreamer.com/an-angular-event-bus-with-postal-js/
我喜欢$rootscope。使用Emit实现相互通信。我建议清洁和性能有效的解决方案，不污染全球空间。
module.factory("eventBus",function (){
var obj = {};
obj.handlers = {};
obj.registerEvent = function (eventName,handler){
if(typeof this.handlers[eventName] == 'undefined'){
this.handlers[eventName] = [];
}
this.handlers[eventName].push(handler);
}
obj.fireEvent = function (eventName,objData){
if(this.handlers[eventName]){
for(var i=0;i<this.handlers[eventName].length;i++){
this.handlers[eventName][i](objData);
}
}
}
return obj;
})
//Usage:
//In controller 1 write:
eventBus.registerEvent('fakeEvent',handler)
function handler(data){
alert(data);
}
//In controller 2 write:
eventBus.fireEvent('fakeEvent','fakeData');
由于defineProperty存在浏览器兼容性问题，我认为我们可以考虑使用服务。
angular.module('myservice', [], function($provide) {
$provide.factory('msgBus', ['$rootScope', function($rootScope) {
var msgBus = {};
msgBus.emitMsg = function(msg) {
$rootScope.$emit(msg);
};
msgBus.onMsg = function(msg, scope, func) {
var unbind = $rootScope.$on(msg, func);
scope.$on('$destroy', unbind);
};
return msgBus;
}]);
});
并像这样在控制器中使用它:
控制器1
函数($scope, msgBus) {
美元的范围。Sendmsg = function() {
msgBus.emitMsg(“somemsg”)
｝
｝
控制器2
函数($scope, msgBus) {
msgBus。onMsg('somemsg'， $scope, function() {
//你的逻辑
})；
｝
