AngularJS 在控制器之间共享异步服务数据 [英] AngularJS share asynchronous service data between controllers
问题描述
我知道这个问题在 stackoverflow 中被问过多次,但我找不到正确的答案.
我需要实现的是能够在一个控制器中启动一些异步调用,当结果返回时更新其他控制器中的 $scope.
我知道我应该使用实际执行 $http 内容的共享服务,但我无法更新其他控制器范围.
这是我的代码:
查看
<div class="scroller scroll-pane" frames-scroll-pane><div class="概览">{{帧}}
服务
angular.module('BrightspotApp.models', []).factory('framesModel', function($http,globals){var api_path = 'clickard/GetClickardById/';var sharedService = {};sharedService.getAsync = 函数(id){sharedService.frames = {};$http.get(globals.serverUrl + api_path + id).成功(功能(数据,状态,标题,配置){sharedService.frames = 数据;}).error(function (data, status, headers, config) {console.log('HTTP 错误');});};返回共享服务;});
控制器
angular.module('BrightspotApp.controllers', [])./*** 顶部菜单控制器*/控制器('菜单控制器',功能($scope,framesModel){$scope.clicked = false;$scope.toggle = 函数(项目){$scope.clicked = !$scope.clicked;如果($scope.clicked){frameModel.getAsync(1);}};$scope.itemClass = function(item) {返回 $scope.clicked ?活动":未定义;};})./*** 帧控制器*/控制器('framesController',函数($scope,framesModel){$scope.data = [];$scope.frames = 框架模型;});
这个东西在某种意义上是有效的,当异步调用返回时,它实际上更新了 $scope 并因此更新了 DOM.
但是我需要实现的是在异步完成时获得回调(可能带有 $broadcast)以通知帧控制器,然后控制返回的数据,以便我可以在更新 $scope 之前对其进行操作以及 DOM.
非常感谢您的帮助.
是这样的:
$http.get(globals.serverUrl + api_path + id).then(function(result){sharedService.frames = result.data;});
如果您希望 getAsync 方法在调用完成后返回数据,则可以使用 defer:
sharedService.getAsync = function (id) {sharedService.frames = {};var defer = $q.defer();$http.get(globals.serverUrl + api_path + id).然后(功能(结果){sharedService.frames = result.data;defer.resolve(result.data);}).error(function (data, status, headers, config) {console.log('HTTP 错误');});返回 defer.promise;};
I know this issue has been asked several times in stackoverflow, but I couldn't find a proper answer.
What I need to achieve is to be able to initiate some asynchronous call in one controller and when the result returns update the $scope in some other controller.
I understand that I should use a shared service that actually does the $http stuff, but I can't manage to update the other controller scope.
Here is my code:
View
<div class="screens" ng-controller="framesController">
<div class="scroller scroll-pane" frames-scroll-pane>
<div class="overview">
{{frames}}
</div>
</div>
</div>
Service
angular.module('BrightspotApp.models', []).
factory('framesModel', function($http,globals){
var api_path = 'clickard/GetClickardById/';
var sharedService = {};
sharedService.getAsync = function (id) {
sharedService.frames = {};
$http.get(globals.serverUrl + api_path + id).
success(function (data, status, headers, config) {
sharedService.frames = data;
}).error(function (data, status, headers, config) {
console.log('HTTP error');
});
};
return sharedService;
});
Controllers
angular.module('BrightspotApp.controllers', []).
/**
* Top menu controller
*/
controller('menuController', function($scope,framesModel){
$scope.clicked = false;
$scope.toggle = function (item) {
$scope.clicked = !$scope.clicked;
if ($scope.clicked){
framesModel.getAsync(1);
}
};
$scope.itemClass = function(item) {
return $scope.clicked ? 'active' : undefined;
};
}).
/**
* Frames controller
*/
controller('framesController', function($scope,framesModel){
$scope.data = [];
$scope.frames = framesModel;
});
This thing kind of works in the sense that it actually updates the $scope and consequently the DOM when the async call returns.
But what I need to achieve is to get a callback when the async finishes (maybe with a $broadcast) to notify the frames controller and then to have control over the returned data so that I can manipulate it before updating the $scope and consequently the DOM.
Assistance will be much appreciated.
Something like this:
$http.get(globals.serverUrl + api_path + id).then(function(result){
sharedService.frames = result.data;
});
If you want your getAsync method to return the data when the call has completed then you can use defer:
sharedService.getAsync = function (id) {
sharedService.frames = {};
var defer = $q.defer();
$http.get(globals.serverUrl + api_path + id).
then(function(result){
sharedService.frames = result.data;
defer.resolve(result.data);
}).error(function (data, status, headers, config) {
console.log('HTTP error');
});
return defer.promise;
};
这篇关于AngularJS 在控制器之间共享异步服务数据的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!