我有以下两个对等控制器。这些没有父母:
<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) {
}]);
在控制器1中,我想更新由Controller2控制的HTML中的变量xxx的值。有没有办法可以做到这一点?
答案 0 :(得分:38)
使用服务来实现这一目标:
MyApp.app.service("xxxSvc", function () {
var _xxx = {};
return {
getXxx: function () {
return _xxx;
},
setXxx: function (value) {
_xxx = value;
}
};
});
接下来,将此服务注入两个控制器。
在Controller1中,您需要通过调用服务来设置共享xxx值:xxxSvc.setXxx(xxx)
最后,在Controller2中,在此服务的getXxx()函数中添加$ watch,如下所示:
$scope.$watch(function () { return xxxSvc.getXxx(); }, function (newValue, oldValue) {
if (newValue != null) {
//update Controller2's xxx value
$scope.xxx= newValue;
}
}, true);
答案 1 :(得分:22)
绝对使用服务在控制器之间共享数据,这是一个工作示例。 $ broadcast不是要走的路,你应该避免在有更合适的方式时使用事件系统。使用'service','value'或'constant'(对于全局常量)。
http://plnkr.co/edit/ETWU7d0O8Kaz6qpFP5Hp
以下是输入示例,您可以在页面上看到数据镜像: 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 :(得分:15)
在一个控制器中,您可以执行以下操作:
$rootScope.$broadcast('eventName', data);
在另一个地方听取这个事件:
$scope.$on('eventName', function (event, data) {...});
答案 3 :(得分:3)
您需要使用
$rootScope.$broadcast()
在必须发送数据的控制器中。在接收这些数据的那个中,你使用
$scope.$on
这是我前几天分道扬琴的小提琴(我不知道是谁再先做了这件事