控制器之间的正确通信方式是什么?
我目前正在使用一个可怕的软糖涉及窗口:
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);
}
}
由于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() {
//你的逻辑
});
}
从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);
}
下面是一个完整的体系结构概述:组件通信