如果你想调用一个控制器到另一个有可用
- $ rootScope。$放出()和$ rootScope四种方法。$ broadcast()
- 如果第二个控制器是小孩,则可以使用父级子通信。
- 使用服务
- 类黑客攻击 - 与angular.element的帮助()
1 $ rootScope $发出()和$ rootScope $广播()
。
控制器及其作用域可能被破坏 但$ rootScope保留在应用程序中,这就是为什么我们要使用$ rootScope,因为$ rootScope是所有作用域的父级。
如果您是从父执行通信的孩子,甚至孩子想与它的兄弟姐妹沟通,你可以使用$广播
如果从孩子进行到家长的沟通,没有invovled兄弟姐妹,那么你可以使用$ rootScope。$发出
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.如果第二个控制器是孩子,你可以使用儿童家长的沟通
它的最佳方法之一,如果你想做到哪里的孩子要传达孩子家长的沟通与直接父母那么它不会需要任何种类的$广播或$发出,但如果你想做从父母到孩子的沟通,那么你必须使用服务或$广播
例如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的依赖注入mecahnism注入维护和测试。服务。
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");
});
它会给输出你好儿童世界和家长您好世界。根据服务的角度文档单身 - 依赖于服务的每个组件获得由服务工厂产生的单一实例的引用。
黑客4.Kind - 与angular.element的帮助()
该方法通过ID /唯一class.angular.element()方法返回获取从元素范围()元素和作用域()给另一个变量的$ 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的自身的价值,当你将点击的文本,你会在终端也随之得到的值。如果您单击父控制器跨度,浏览器将控制孩子的值,反之亦然。
这谷歌组螺纹,https://groups.google.com/d/topic/angular/m_mn-8gnNt4/discussion,讨论了5种方式控制器能够彼此交谈。 –
有很好的答案已经在这里,所以我只是想指出的是,对于特定用例所提到的,也许是一个AngularJS过滤器会是一个更好的解决办法?只是以为我会提到它:) –