This question already has an answer here:
这个问题在这里已有答案:
- AngularJS: How can I pass variables between controllers? 15 answers
- AngularJS:如何在控制器之间传递变量? 15个答案
I have the following two peer controllers. There's no parent to these:
我有以下两个对等控制器。这些没有父母:
<div data-ng-controller="Controller1">
</div>
<div data-ng-controller="Controller2">
The value of xxx is: {{ xxx }}
</div>
angular.module('test')
.controller('QuestionsStatusController1',
['$rootScope', '$scope'
function ($rootScope, $scope) {
// How can I set the value of xxx in the HTML that's part of Controller2
}]);
angular.module('test')
.controller('QuestionsStatusController2',
['$rootScope', '$scope',
function ($rootScope, $scope) {
}]);
In controller 1 I want to update the value of the variable xxx in the HTML that's controlled by Controller2. Is there a way I can do this?
在控制器1中,我想更新由Controller2控制的HTML中的变量xxx的值。有没有办法可以做到这一点?
4 个解决方案
#1
23
Definitely use a service to share data between controllers, here is a working example. $broadcast is not the way to go, you should avoid using the eventing system when there is a more appropriate way. Use a 'service', 'value' or 'constant' (for global constants).
绝对使用服务在控制器之间共享数据,这是一个工作示例。 $ broadcast不是要走的路,你应该避免在有更合适的方式时使用事件系统。使用'service','value'或'constant'(对于全局常量)。
http://plnkr.co/edit/ETWU7d0O8Kaz6qpFP5Hp
http://plnkr.co/edit/ETWU7d0O8Kaz6qpFP5Hp
Here is an example with an input so you can see the data mirror on the page: http://plnkr.co/edit/DbBp60AgfbmGpgvwtnpU
下面是一个输入示例,您可以在页面上看到数据镜像:http://plnkr.co/edit/DbBp60AgfbmGpgvwtnpU
var testModule = angular.module('testmodule', []);
testModule
.controller('QuestionsStatusController1',
['$rootScope', '$scope', 'myservice',
function ($rootScope, $scope, myservice) {
$scope.myservice = myservice;
}]);
testModule
.controller('QuestionsStatusController2',
['$rootScope', '$scope', 'myservice',
function ($rootScope, $scope, myservice) {
$scope.myservice = myservice;
}]);
testModule
.service('myservice', function() {
this.xxx = "yyy";
});
#2
37
Use a service to achieve this:
使用服务来实现这一目标:
MyApp.app.service("xxxSvc", function () {
var _xxx = {};
return {
getXxx: function () {
return _xxx;
},
setXxx: function (value) {
_xxx = value;
}
};
});
Next, inject this service into both controllers.
接下来,将此服务注入两个控制器。
In Controller1, you would need to set the shared xxx value with a call to the service: xxxSvc.setXxx(xxx)
在Controller1中,您需要通过调用服务来设置共享xxx值:xxxSvc.setXxx(xxx)
Finally, in Controller2, add a $watch on this service's getXxx() function like so:
最后,在Controller2中,在此服务的getXxx()函数上添加$ watch,如下所示:
$scope.$watch(function () { return xxxSvc.getXxx(); }, function (newValue, oldValue) {
if (newValue != null) {
//update Controller2's xxx value
$scope.xxx= newValue;
}
}, true);
#3
15
In one controller, you can do:
在一个控制器中,您可以:
$rootScope.$broadcast('eventName', data);
and listen to the event in another:
并听取另一个事件:
$scope.$on('eventName', function (event, data) {...});
#4
4
You need to use
你需要使用
$rootScope.$broadcast()
in the controller that must send datas. And in the one that receive those datas, you use
在必须发送数据的控制器中。在接收这些数据的那个中,你使用
$scope.$on
Here is a fiddle that i forked a few time ago (I don't know who did it first anymore
这是我前几天分道扬琴的小提琴(我不知道是谁再先做了
http://jsfiddle.net/patxy/RAVFM/
http://jsfiddle.net/patxy/RAVFM/
#1
23
Definitely use a service to share data between controllers, here is a working example. $broadcast is not the way to go, you should avoid using the eventing system when there is a more appropriate way. Use a 'service', 'value' or 'constant' (for global constants).
绝对使用服务在控制器之间共享数据,这是一个工作示例。 $ broadcast不是要走的路,你应该避免在有更合适的方式时使用事件系统。使用'service','value'或'constant'(对于全局常量)。
http://plnkr.co/edit/ETWU7d0O8Kaz6qpFP5Hp
http://plnkr.co/edit/ETWU7d0O8Kaz6qpFP5Hp
Here is an example with an input so you can see the data mirror on the page: http://plnkr.co/edit/DbBp60AgfbmGpgvwtnpU
下面是一个输入示例,您可以在页面上看到数据镜像:http://plnkr.co/edit/DbBp60AgfbmGpgvwtnpU
var testModule = angular.module('testmodule', []);
testModule
.controller('QuestionsStatusController1',
['$rootScope', '$scope', 'myservice',
function ($rootScope, $scope, myservice) {
$scope.myservice = myservice;
}]);
testModule
.controller('QuestionsStatusController2',
['$rootScope', '$scope', 'myservice',
function ($rootScope, $scope, myservice) {
$scope.myservice = myservice;
}]);
testModule
.service('myservice', function() {
this.xxx = "yyy";
});
#2
37
Use a service to achieve this:
使用服务来实现这一目标:
MyApp.app.service("xxxSvc", function () {
var _xxx = {};
return {
getXxx: function () {
return _xxx;
},
setXxx: function (value) {
_xxx = value;
}
};
});
Next, inject this service into both controllers.
接下来,将此服务注入两个控制器。
In Controller1, you would need to set the shared xxx value with a call to the service: xxxSvc.setXxx(xxx)
在Controller1中,您需要通过调用服务来设置共享xxx值:xxxSvc.setXxx(xxx)
Finally, in Controller2, add a $watch on this service's getXxx() function like so:
最后,在Controller2中,在此服务的getXxx()函数上添加$ watch,如下所示:
$scope.$watch(function () { return xxxSvc.getXxx(); }, function (newValue, oldValue) {
if (newValue != null) {
//update Controller2's xxx value
$scope.xxx= newValue;
}
}, true);
#3
15
In one controller, you can do:
在一个控制器中,您可以:
$rootScope.$broadcast('eventName', data);
and listen to the event in another:
并听取另一个事件:
$scope.$on('eventName', function (event, data) {...});
#4
4
You need to use
你需要使用
$rootScope.$broadcast()
in the controller that must send datas. And in the one that receive those datas, you use
在必须发送数据的控制器中。在接收这些数据的那个中,你使用
$scope.$on
Here is a fiddle that i forked a few time ago (I don't know who did it first anymore
这是我前几天分道扬琴的小提琴(我不知道是谁再先做了
http://jsfiddle.net/patxy/RAVFM/
http://jsfiddle.net/patxy/RAVFM/