控制器之间AngularJS份额异步服务数据 [英] AngularJS share asynchronous service data between controllers

问题描述

我知道这个问题已经被问在计算器几次，但我无法找到一个合适的答案。

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.

我知道我应该使用一个共享服务实际执行$ HTTP的东西，但我不能设法更新其他控制器的范围。

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.

下面是我的code：

查看

<div class="screens" ng-controller="framesController">
   <div class="scroller scroll-pane" frames-scroll-pane>
         <div class="overview"> 
              {{frames}}                      
         </div>
   </div>
</div>

服务

 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;

      });

控制器

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;
    });

这件事样的作品在这个意义上，它实际上更新$范围，因此在DOM当异步调用的回报。

This thing kind of works in the sense that it actually updates the $scope and consequently the DOM when the async call returns.

但我需要做到的，是得到一个回调，在异步完成（也许用$广播）通知帧控制器，然后有在返回的数据控制，这样我可以更新$范围之前对其进行操作因此DOM的。

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.

援助将大大AP preciated。

Assistance will be much appreciated.

推荐答案

事情是这样的：

$http.get(globals.serverUrl + api_path + id).then(function(result){
    sharedService.frames = result.data;
});

如果你希望你的getAsync方法返回数据时，调用已完成，那么你可以使用延迟：

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屋！