How assign variable scope with callback in AngularJS?

Question

I have a big problem in my angular js application. I have a factory module which has a getAll() function, this get the json data from the server. And I have the controller module where I try to assign the factory's getAll() function's value to the scope.eventSports.

My problem is that, the variable assign is run first, and it does not wait that the getAll() function return back with the data. The variable assign run at first with the undefinied... and then I get the result of getAll() function.

How can I achieve the variable assign wait the getAll() function?

The factory:

var gameDataFactory = angular.module('gameDataFactory', []);

gameDataFactory.factory('gameDataFactory', ['gameService', function(gameService) {

    var sportEvents = {

        getAll : function(){
            gameService.getGroupedEvents()
            .success(function(data) {
                // Get the json data from the server.
                // This gives back the data, but later, this run at second time...
                console.log(data.sportEvents);
                return data.sportEvents;
            })
            .error(function(error) {
                return null;
            });
        }
    };

    return {
        sportEvents: sportEvents
    };
}]);

The controller:

gameControllers.controller('SportEventListCtrl', ['$scope', 'gameService', 'gameDataFactory', '$sce',
    function($scope, gameService, gameDataFactory, $sce) {
    $scope.sportEvents = {};

    $scope.status = true;

    // I should somehow assign this scope variable with callback
    $scope.sportEvents = gameDataFactory.sportEvents.getAll();
    // This run first and this is undefinied.
    console.log($scope.sportEvents);

getGroupedEvents() has an async call? I think that the best way to handle this, is using promises. Take a look here http://markdalgleish.com/2013/06/using-promises-in-angularjs-views/ and here http://andyshora.com/promises-angularjs-explained-as-cartoon.html — Christian Benseler, Sep 04 '14 at 20:02
https://stackoverflow.com/questions/25670870/angularjs-http-factory-is-not-working/25671341#25671341 — Darshan P, Sep 04 '14 at 20:04
`betDataFactory.sportEvents.getAll().then(function(data){ $scope.sportEvents = data; console.log("in " + $scope.sportEvents); });` I tried this. But I got an error: _TypeError: Cannot read property 'then' of undefined_ — Lacces, Sep 04 '14 at 20:21
You should probably have a look at [How to return the response from an Ajax call?](http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call). — Felix Kling, Sep 04 '14 at 20:22
@Lacces: You are not returning anything from `getAll`, so of course that doesn't work. — Felix Kling, Sep 04 '14 at 20:23
Thanks everybody. However I have another question: `gameDataFactory.sportEvents.getAll().then(function(data){ console.log(data.data.sportEvents); $scope.sportEvents = data.data.sportEvents; });` I can reach the sportEvents in this way in the controller, but why? Because in my factory I try to modify the return in the success to data.data.sportEvent, I got another error. — Lacces, Sep 04 '14 at 20:37

score 1 · Accepted Answer · answered Sep 04 '14 at 20:18

1

Change this line

gameService.getGroupedEvents()

to

return gameService.getGroupedEvents()

answered Sep 04 '14 at 20:18

walts

92
3
15

score 0 · Answer 2 · answered Sep 04 '14 at 20:33

0

There are several ways of implementing this functionality, such as returning the deferred object. Another simpler approach is to pass $scope to getAll function, and bind whatever data to the passed $scope.

answered Sep 04 '14 at 20:33

ABOS

3,723
3
17
23

How assign variable scope with callback in AngularJS?

2 Answers2