如果你想在两个控制器之间共享数据,你可以使用Service。服务是单例的,因此您可以轻松地共享您的数据。
但是,您希望在更改数据时通知您,因此,您应该使用$broadcast() 和$on() 方法。
-
$broadcast :将事件向下调度到所有子作用域
由于您的作用域之间没有父子关系,如果您的控制器处于同一级别,您可以将$rootScope 注入控制器并将事件广播到所有子作用域。
编辑
有使用Service和broadcast参数的例子。
所以你可以这样做:
控制器
(function(){
function Controller($scope, $rootScope, Service) {
$scope.data = 1;
$scope.set = function(n){
$scope.data = n;
Service.set($scope.data);
$rootScope.$broadcast('set', $scope.data);
}
}
angular
.module('app', [])
.controller('ctrl', Controller);
})();
(function(){
function Controller($scope, Service) {
$scope.$on('set', function(e, data){
$scope.data2 = Service.get();
$scope.data3 = data;
});
}
angular
.module('app')
.controller('ctrl2', Controller);
})();
服务
(function(){
function Service(){
var data;
function get(){
return data;
}
function set(value){
data = value;
}
return {
get: get,
set: set
};
}
angular
.module('app')
.factory('Service', Service);
})();
HTML
<body ng-app='app'>
<h3>Controller 1</h3>
<div ng-controller="ctrl">
<button ng-click="set(data)">change</button>
<input type="text" ng-model="data">
</div>
<h3>Controller 2</h3>
<div ng-controller="ctrl2">
<p>Data from controller 1 : {{data2}}</p>
<p>Data from controller 1 without service : {{data3}}</p>
</div>
</body>
现在,您将能够在不同的控制器之间进行通信,并使用 Service 检索数据。
你可以看到Plunker
只需使用服务单例
控制器
(function(){
function Controller($scope, Service) {
$scope.data = 1;
$scope.set = function(n){
Service.set(n)
}
}
angular
.module('app', [])
.controller('ctrl', Controller);
})();
(function(){
function Controller($scope, Service) {
//Retrieve service instance
$scope.data_service = Service;
}
angular
.module('app')
.controller('ctrl2', Controller);
})();
HTML
<body ng-app='app'>
<h3>Controller 1</h3>
<div ng-controller="ctrl">
<button ng-click="set(data)">change</button>
<input type="text" ng-model="data">
</div>
<h3>Controller 2</h3>
<div ng-controller="ctrl2">
<p>Data from controller 1 : {{data_service.get()}}</p>
</div>
</body>
在这里,我们只是共享我们的服务实例。
你可以看到Plunker with Service