是否可以让一个控制器使用另一个控制器?
例如:
这个HTML文档只是打印MessageCtrl控制器在MessageCtrl .js文件中传递的消息。
<html xmlns:ng="http://angularjs.org/">
<head>
<meta charset="utf-8" />
<title>Inter Controller Communication</title>
</head>
<body>
<div ng:controller="MessageCtrl">
<p>{{message}}</p>
</div>
<!-- Angular Scripts -->
<script src="http://code.angularjs.org/angular-0.9.19.js" ng:autobind></script>
<script src="js/messageCtrl.js" type="text/javascript"></script>
</body>
</html>
控制器文件包含以下代码:
function MessageCtrl()
{
this.message = function() {
return "The current date is: " + new Date().toString();
};
}
它只是打印当前日期;
如果我要添加另一个控制器DateCtrl，它将日期以特定格式返回给MessageCtrl，将如何进行此操作?DI框架似乎与xmlhttprequest和访问服务有关。
下面是两个控制器共享服务数据的单页示例:
<!doctype html>
<html ng-app="project">
<head>
<title>Angular: Service example</title>
<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<script>
var projectModule = angular.module('project',[]);
projectModule.factory('theService', function() {
return {
thing : {
x : 100
}
};
});
function FirstCtrl($scope, theService) {
$scope.thing = theService.thing;
$scope.name = "First Controller";
}
function SecondCtrl($scope, theService) {
$scope.someThing = theService.thing;
$scope.name = "Second Controller!";
}
</script>
</head>
<body>
<div ng-controller="FirstCtrl">
<h2>{{name}}</h2>
<input ng-model="thing.x"/>
</div>
<div ng-controller="SecondCtrl">
<h2>{{name}}</h2>
<input ng-model="someThing.x"/>
</div>
</body>
</html>
也在这里:https://gist.github.com/3595424
如果你正在寻找触发和广播事件来共享数据或跨控制器调用函数，请查看这个链接:并通过zbynour检查答案(答案具有最大投票)。我引用了他的答案!!
如果firstCtrl的作用域是secondCtrl作用域的父作用域，你的代码应该通过在firstCtrl中用$broadcast替换$emit来工作:
function firstCtrl($scope){
$scope.$broadcast('someEvent', [1,2,3]);
}
function secondCtrl($scope){
$scope.$on('someEvent', function(event, mass) {console.log(mass)});
}
如果你的作用域之间没有父子关系，你可以将$rootScope注入到控制器中，并将事件广播到所有的子作用域(也就是secondCtrl)。
function firstCtrl($rootScope){
$rootScope.$broadcast('someEvent', [1,2,3]);
}
最后，当你需要从子控制器向上分派事件到作用域时，你可以使用$scope.$emit。如果firstCtrl作用域是secondCtrl作用域的父作用域:
function firstCtrl($scope){
$scope.$on('someEvent', function(event, data) { console.log(data); });
}
function secondCtrl($scope){
$scope.$emit('someEvent', [1,2,3]);
}
看这个小提琴:http://jsfiddle.net/simpulton/XqDxG/
请观看以下视频:控制器之间的通信
Html:
<div ng-controller="ControllerZero">
<input ng-model="message" >
<button ng-click="handleClick(message);">LOG</button>
</div>
<div ng-controller="ControllerOne">
<input ng-model="message" >
</div>
<div ng-controller="ControllerTwo">
<input ng-model="message" >
</div>
javascript:
var myModule = angular.module('myModule', []);
myModule.factory('mySharedService', function($rootScope) {
var sharedService = {};
sharedService.message = '';
sharedService.prepForBroadcast = function(msg) {
this.message = msg;
this.broadcastItem();
};
sharedService.broadcastItem = function() {
$rootScope.$broadcast('handleBroadcast');
};
return sharedService;
});
function ControllerZero($scope, sharedService) {
$scope.handleClick = function(msg) {
sharedService.prepForBroadcast(msg);
};
$scope.$on('handleBroadcast', function() {
$scope.message = sharedService.message;
});
}
function ControllerOne($scope, sharedService) {
$scope.$on('handleBroadcast', function() {
$scope.message = 'ONE: ' + sharedService.message;
});
}
function ControllerTwo($scope, sharedService) {
$scope.$on('handleBroadcast', function() {
$scope.message = 'TWO: ' + sharedService.message;
});
}
ControllerZero.$inject = ['$scope', 'mySharedService'];
ControllerOne.$inject = ['$scope', 'mySharedService'];
ControllerTwo.$inject = ['$scope', 'mySharedService'];
在angular 1.5中，这可以通过以下方式实现:
(function() {
'use strict';
angular
.module('app')
.component('parentComponent',{
bindings: {},
templateUrl: '/templates/products/product.html',
controller: 'ProductCtrl as vm'
});
angular
.module('app')
.controller('ProductCtrl', ProductCtrl);
function ProductCtrl() {
var vm = this;
vm.openAccordion = false;
// Capture stuff from each of the product forms
vm.productForms = [{}];
vm.addNewForm = function() {
vm.productForms.push({});
}
}
}());
这是父组件。在这里，我创建了一个函数，将另一个对象推入我的productForms数组-注意-这只是我的示例，这个函数可以是任何东西。
现在我们可以创建另一个使用require的组件:
(function() {
'use strict';
angular
.module('app')
.component('childComponent', {
bindings: {},
require: {
parent: '^parentComponent'
},
templateUrl: '/templates/products/product-form.html',
controller: 'ProductFormCtrl as vm'
});
angular
.module('app')
.controller('ProductFormCtrl', ProductFormCtrl);
function ProductFormCtrl() {
var vm = this;
// Initialization - make use of the parent controllers function
vm.$onInit = function() {
vm.addNewForm = vm.parent.addNewForm;
};
}
}());
在这里，子组件创建了对父组件函数addNewForm的引用，然后可以将其绑定到HTML并像其他函数一样调用。
