如何在兄弟控制器之间进行通信？
[英]How do I communicate between sibling controllers?
问题描述
Here's my code: 
这是我的代码：
<div ng-controller="mainCtrl">
<button ng-click="onclick()"></button>
<button ng-click="onclick()"></button>
<button ng-click="onclick()"></button>
{{display}}
</div>
<div ng-controller="SecondController">{{display}}</div>
<div ng-controller="lastController">{{display}}</div>
I have to get some message in each div when the user clicks on the button. 当用户单击按钮时，我必须在每个div中获得一些消息。
I've tried the below code: 我试过下面的代码：
app.controller('mainCtrl',function($scope,$rootScope){
$scope.OnClick = function (msg) {
$rootScope.$broadcast("firstEvent",{});
}
$scope.$on("firstEvent", function (msg ) {
$scope.display = "hello world";
});
});
app.controller('SecondController',function( $scope){
$scope.$on("firstEvent", function (msg) {
$scope.display = "hello how Are you";
});
});
app.controller('lastController',function($scope) {
$scope.$on("firstEvent", function (msg) {
$scope.display = "this is my Query";
});
});
When the user clicks on each button, it should get data in each div. 当用户单击每个按钮时，它应该在每个div中获取数据。
How come its only possible with $on , $event and $broadcast ? 只有$on ， $event和$broadcast怎么可能呢？
2 个解决方案
解决方案1
1 2018-05-22 05:54:24
$broadcast() sends an even downwards from parent to child controllers. $ broadcast（）从父级向子级控制器发送一个甚至向下的数据。 The $emit() method, on the other hand, does exactly opposite. 另一方面， $ emit（）方法的作用恰恰相反。 It sends an event upwards from the current controller to all of its parent controllers. 它将事件从当前控制器向上发送到其所有父控制器。
This is a simple example of communicating between controllers 这是控制器之间进行通信的简单示例
angular.module("app", []) .controller("mainCtrl", [ "$scope", "$rootScope", function($scope, $rootScope) { $scope.go = function(msg) { if (msg == 1) { $scope.display = "hello firstEvent"; } else if (msg == 2) { $rootScope.$broadcast("showSomething", {}); } else { $rootScope.$broadcast("showGoodBye", {}); } }; } ]).controller("SecondController", [ "$scope", "$rootScope", function($scope, $rootScope) { $scope.$on("showSomething", function(msg) { $scope.display = "hello Something"; }); } ]).controller("ThirdController", [ "$scope", "$rootScope", function($scope, $rootScope) { $scope.$on("showGoodBye", function(msg) { $scope.display = "hello GoodBye"; }); } ]);
<div ng-app="app"> <div ng-controller="mainCtrl"> mainCtrl : {{display}} <br> <button ng-click="go(1)"> Show Hello </button> <button ng-click="go(2)"> Show Something </button> <button ng-click="go(3)"> Show GoodBye </button> </div> <hr> <div ng-controller="SecondController"> SecondController : {{display}} <hr> </div> <div ng-controller="ThirdController"> SecondController : {{display}} <hr> </div> </div>
解决方案2
0 已采纳 2018-05-22 05:58:59
Here is the solution: 解决方法如下：
I prefer not to use rootScope , you can use intermaeidate service to share data between two controllers 我不想使用rootScope ，可以使用intermaeidate service 在两个controllers之间共享数据
Solution with services: 服务解决方案：
Here is how service looks: 服务外观如下：
app.service('StoreService',function(){
var data;
this.save=function(data){
this.data=data;
};
this.getData=function(){
return this.data;
};
});
Using a service without rootScope 使用没有rootScope的service
Demo without rootScope 没有rootScope的演示
Solution with rootScope rootScope解决方案
var app = angular.module('myApp', []); app.controller('mainCtrl',function($scope,$rootScope){ $scope.buttonclick = function (msg) { var object = { data: msg } $rootScope.$broadcast("firstEvent",object); } $rootScope.$on("firstEvent", function (event, msg) { $scope.display = msg.data; }); }) app.controller('SecondController',function( $scope, $rootScope){ $rootScope.$on("firstEvent", function (event, msg) { $scope.display = msg.data; }); }) app.controller('lastController',function( $scope, $rootScope){ $rootScope.$on("firstEvent", function (event, msg) { $scope.display = msg.data; }); })
<!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <body> <div ng-app="myApp"> <div ng-controller="mainCtrl"> <button ng-click="buttonclick('button1')">button1</button> <button ng-click="buttonclick('button2')">button2</button> <button ng-click="buttonclick('button3')">button3</button> <br> {{display}} </div> <div ng-controller="SecondController">{{display}}</div> <div ng-controller="lastController">{{display}}</div> </div> </body> </html>
Please run the above snippet 请运行上面的代码段
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.