如果你想将一个控制器调用到另一个控制器中,有四种方法可用
$rootScope.$emit()和$rootScope.$broadcast()
如果第二控制器是子控制器,你可以使用父-子通信。
使用服务
有点hack -在angular.element()的帮助下
1. $rootScope.$emit()和$rootScope.$broadcast()
控制器和它的作用域可以被破坏,
但是$rootScope仍然存在于整个应用程序中,这就是为什么我们要使用$rootScope,因为$rootScope是所有作用域的父作用域。
如果您正在执行从父母到孩子的通信,甚至孩子也想与它的兄弟姐妹通信,您可以使用$broadcast
如果您正在执行从子节点到父节点的通信,没有涉及到兄弟节点,那么您可以使用$rootScope.$emit
HTML
<body ng-app="myApp">
<div ng-controller="ParentCtrl" class="ng-scope">
// ParentCtrl
<div ng-controller="Sibling1" class="ng-scope">
// Sibling first controller
</div>
<div ng-controller="Sibling2" class="ng-scope">
// Sibling Second controller
<div ng-controller="Child" class="ng-scope">
// Child controller
</div>
</div>
</div>
</body>
Angularjs代码
var app = angular.module('myApp',[]);//We will use it throughout the example
app.controller('Child', function($rootScope) {
$rootScope.$emit('childEmit', 'Child calling parent');
$rootScope.$broadcast('siblingAndParent');
});
app.controller('Sibling1', function($rootScope) {
$rootScope.$on('childEmit', function(event, data) {
console.log(data + ' Inside Sibling one');
});
$rootScope.$on('siblingAndParent', function(event, data) {
console.log('broadcast from child in parent');
});
});
app.controller('Sibling2', function($rootScope) {
$rootScope.$on('childEmit', function(event, data) {
console.log(data + ' Inside Sibling two');
});
$rootScope.$on('siblingAndParent', function(event, data) {
console.log('broadcast from child in parent');
});
});
app.controller('ParentCtrl', function($rootScope) {
$rootScope.$on('childEmit', function(event, data) {
console.log(data + ' Inside parent controller');
});
$rootScope.$on('siblingAndParent', function(event, data) {
console.log('broadcast from child in parent');
});
});
在上面的代码中,$emit的控制台'childEmit'不会调用内部的子兄弟姐妹,它只会调用内部的父兄弟姐妹,其中$broadcast也会在内部的兄弟姐妹和父兄弟姐妹中调用。这是表现发挥作用的地方。如果您正在使用子到父通信,$emit是更可取的,因为它跳过了一些脏检查。
2. 如果第二控制器是子控制器,你可以使用子-父通信
这是最好的方法之一,如果你想做孩子父母通信,孩子想与直接的父母通信,那么它不需要任何类型的$broadcast或$emit,但如果你想做从父母到孩子的通信,那么你必须使用service或$broadcast
例如HTML:-
<div ng-controller="ParentCtrl">
<div ng-controller="ChildCtrl">
</div>
</div>
Angularjs
app.controller('ParentCtrl', function($scope) {
$scope.value='Its parent';
});
app.controller('ChildCtrl', function($scope) {
console.log($scope.value);
});
当你使用子控制器到父控制器的通信时,Angularjs会在子控制器中搜索一个变量,如果它不在父控制器中,那么它会选择查看父控制器中的值。
3.使用服务
AngularJS使用服务架构支持“关注点分离”的概念。服务是javascript函数,只负责执行特定的任务。这使它们成为可维护和可测试的独立实体。使用Angularjs的依赖注入机制进行注入的服务。
Angularjs代码:
app.service('communicate',function(){
this.communicateValue='Hello';
});
app.controller('ParentCtrl',function(communicate){//Dependency Injection
console.log(communicate.communicateValue+" Parent World");
});
app.controller('ChildCtrl',function(communicate){//Dependency Injection
console.log(communicate.communicateValue+" Child World");
});
它将输出Hello Child World和Hello Parent World。根据Angular的服务文档,singleton——每个依赖于服务的组件都会获得一个由服务工厂生成的单个实例的引用。
4.有点hack -在angular.element()的帮助下
这个方法通过它的Id / unique class.angular.element()方法从元素中获取scope()返回element,而scope()给出另一个变量的$scope变量,在另一个控制器中使用$scope变量并不是一个好的实践。
HTML: -
<div id='parent' ng-controller='ParentCtrl'>{{varParent}}
<span ng-click='getValueFromChild()'>Click to get ValueFormChild</span>
<div id='child' ng-controller='childCtrl'>{{varChild}}
<span ng-click='getValueFromParent()'>Click to get ValueFormParent </span>
</div>
</div>
Angularjs:-
app.controller('ParentCtrl',function($scope){
$scope.varParent="Hello Parent";
$scope.getValueFromChild=function(){
var childScope=angular.element('#child').scope();
console.log(childScope.varChild);
}
});
app.controller('ChildCtrl',function($scope){
$scope.varChild="Hello Child";
$scope.getValueFromParent=function(){
var parentScope=angular.element('#parent').scope();
console.log(parentScope.varParent);
}
});
在上面的代码控制器显示自己的值在Html和当你将点击文本,你会得到相应的值在控制台。如果你点击父控制器跨度,浏览器将控制台的child值,反之亦然。