AngularJS share asynchronous service data between controllers

Question

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.

Is there a reason you can't manipulate the returned data inside success()? Then you could either assign the manipulated data to frames, or assign it to some other property (e.g., manipulatedFrames) that the framesController would use. — Mark Rajcok
– Mark Rajcok, Commented Aug 8, 2013 at 12:41
The reason is I want to apply a Model-View-Controller style in my code so that I will be able to call different methods inside my framesModel. So, for example I would like to create a frame instance from one controller and get the data inside the other controller. I would also like to have a chance of manipulating it in the other controller before I apply it to the $scope — Gregra
– Gregra, Commented Aug 8, 2013 at 17:11

AlwaysALearner · Accepted Answer · 2013-10-17 05:47:11Z

1

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

edited Oct 17, 2013 at 5:47

answered Aug 8, 2013 at 11:54

AlwaysALearner

43.9k9 gold badges98 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dan Kanze Over a year ago

You can also use an event listener from the controller that does not invoke the service call to subscribe to the value of the result returned.

Kevin Stone Over a year ago

$http already returns a promise, so you don't have to create a new deferred.

Collectives™ on Stack Overflow

AngularJS share asynchronous service data between controllers

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related