如果要将一个控制器调用为另一个控制器,则有四种方法可用
- $ rootScope。$ emit()和$ rootScope。$ broadcast()
- 如果Second controller是child,则可以使用Parent child通讯。
- 使用服务
- 黑客的一种-在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也会在兄弟姐妹内部调用父级。这是性能起作用的地方。如果您正在使用子代与父代的通信,则它是可取的,因为它会跳过一些脏检查。
2.如果“第二个控制器”是孩子,则可以使用“孩子父母”通信
这是最好的方法之一,如果您想在孩子想要与直系父母沟通的地方进行孩子父母沟通,则不需要任何$ 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文档Singletons –依赖于服务的每个组件都将引用由服务工厂生成的单个实例。
4,黑客的种类-在angular.element()的帮助下
此方法通过其ID /唯一类从元素获取scope()。angular.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>
Angular.js:-
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上显示了它们自己的值,当您单击文本时,您将在控制台中获得相应的值。如果您单击父控制器,则浏览器将控制台子级的值,反之亦然。