AngularJS在控制器之间共享异步服务数据

时间:2013-08-08 11:40:31

标签: angularjs angularjs-scope angularjs-service

我知道在stackoverflow中已多次询问此问题,但我找不到合适的答案。

我需要实现的是能够在一个控制器中启动一些异步调用,并在结果返回时更新某个其他控制器中的$ scope。

我知道我应该使用实际执行$ http内容的共享服务,但我无法管理更新其他控制器范围。

这是我的代码:

查看

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

这个东西在某种意义上起作用,它实际上在异步调用返回时更新了$ scope并因此更新了DOM。

但我需要实现的是在异步完成时(可能使用$ broadcast)获取回调以通知帧控制器,然后控制返回的数据,以便我可以在更新$ scope之前对其进行操作因此DOM。

非常感谢协助。

1 个答案:

答案 0 :(得分:1)

这样的事情:

$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).
    then(function(result){
        sharedService.frames = result.data;
        defer.resolve(result.data);
    }).error(function (data, status, headers, config) {
        console.log('HTTP error');
    });
    return defer.promise;
};