如果您想将一个控制器调用到另一个控制器，有四种方法可用
- $rootScope.$emit() 和 $rootScope.$broadcast()
- 如果第二个控制器是子控制器，则可以使用父子通信。
- 使用服务
- 一种 hack - 在 angular.element() 的帮助下
1. $rootScope.$emit() 和 $rootScope.$broadcast()
控制器及其作用域可能会被破坏，但 $rootScope 仍然存在于整个应用程序中，这就是我们采用 $rootScope 的原因，因为 $rootScope 是所有作用域的父级。
如果你正在执行从父母到孩子的交流，甚至孩子也想和它的兄弟姐妹交流，你可以使用 $broadcast
如果您正在执行从孩子到父母的通信，没有兄弟姐妹 invovled 那么您可以使用 $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.如果Second controller是child，可以使用Child Parent通信
它是最好的方法之一，如果你想在孩子想要与直接父母沟通的情况下进行孩子父母的沟通，那么它不需要任何类型的 $broadcast 或 $emit 但如果你想从父母到孩子进行沟通，那么你必须使用服务或 $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 文档- 依赖于服务的每个组件都获得对服务工厂生成的单个实例的引用。
4.Kind of hack - 在 angular.element() 的帮助下
此方法通过元素的 Id / 唯一 class.angular.element() 方法从元素获取 scope() 方法返回元素，并且 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 上显示自己的值，当您单击文本时，您将在控制台中获得相应的值。如果您单击父控制器跨度，浏览器将控制子控制器的值，反之亦然。