AngularJS Controller wait for response (or set callback)

Question

I have a AngularJS application with a controllers.js and factories.js.

What I like is to do something with the values in the controller (which I get from the factories). My problem is, that these values are empty at the time I access them.

How can I wait for the response? Or where can I add a callback?

    Flashcards.controller('CardDeckDetailController', function($scope, $routeParams, CardDeckService, CardService) {
    $scope.carddeck = CardDeckService.findCardDeckByID($routeParams.cardDeckID);
    $scope.cards = CardService.findCardsByCardDeckID($routeParams.cardDeckID);
    $scope.card = $scope.cards[0];
    $scope.cardLength = $scope.cards.length;

});

    Flashcards.factory('CardDeckService', function($resource) {
    var cardDeckService = $resource('/FlashcardsServer/rest/carddecks/:cardDeckID', {}, {});

    cardDeckService.findAllCardDecks = function() {
        return cardDeckService.query();
    };

    cardDeckService.findCardDeckByID = function(id) {
        return cardDeckService.get({ cardDeckID : id });
    };

    return cardDeckService;
});

What I like is to get the first car ($scope.cards[0]) and save it under $scope.card. But its always empty (same with cardsLength).

On the other hand if I print out the size from the partial view with (cards.length), I get the correct value.

Greets and Thanks Marc

@lucama: with the $resource service it's a different problem — Guillaume86
– Guillaume86, Commented Apr 26, 2013 at 16:48
You can still return promises with a resource though it is a little different. Here is an example: beta.plnkr.co/edit/ZXGdN3eRP2yabYILeDay?p=preview — lucuma
– lucuma, Commented Apr 26, 2013 at 19:53

Guillaume86 · Accepted Answer · 2013-04-26 17:48:25Z

6

You can get back the promise by accessing value.$then (has to go to the source code to find that):

Flashcards.controller('CardDeckDetailController', function($scope, $routeParams, CardDeckService, CardService) {
$scope.carddeck = CardDeckService.findCardDeckByID($routeParams.cardDeckID);
$scope.cards = CardService.findCardsByCardDeckID($routeParams.cardDeckID);
$scope.card =  $scope.cards.$then(function(){ return $scope.cards[0]; });
$scope.cardLength = $scope.cards.$then(function(){ return $scope.cards.length; });

edit: $then return the http response

edited Apr 26, 2013 at 17:48

answered Apr 26, 2013 at 15:48

Guillaume86

14.4k4 gold badges56 silver badges57 bronze badges

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

11 Comments

mooonli Over a year ago

Hi Guilllaume. Thanks for the idea. But that doesnt work. I get the message "Cannot call method '$then' of undefined"

Guillaume86 Over a year ago

Looks like you have a bug in your CardService then, it can't be undefined, $resource return an object and hydrate it when it has a response

Guillaume86 Over a year ago

Or you mispelled the property in the line you call $then

mooonli Over a year ago

I have the following lines: Service: cardDeckService.findAllCardDecks = function() { return cardDeckService.query(); }; controller: $scope.carddecks = CardDeckService.findAllCardDecks(); $scope.carddecks.$then( function(carddecks){ alert('TET'); return cards[0]; } ); Without the $then part all the carddecks appear on the view without exception. Otherwise I get the message: "Object has no method '$then'"...

Guillaume86 Over a year ago

Wich version of angularJS do you use? $then was commited recently (1.1.3)

|

Community · Accepted Answer · 2017-05-23 10:32:50Z

3

as lucuma suggests, this can probably be handled with a promise. http://api.jquery.com/promise/ for the jquery promise http://docs.angularjs.org/api/ng.$q the angular promise is based on the jquery promise

this answer has a similar solution for multiple queries to complete AngularJS - wait for multiple resource queries to complete

so instead of

cardDeckService.findCardDeckByID = function(id) {
    return cardDeckService.get({ cardDeckID : id });
};

use

cardDeckService.findCardDeckbyID = function(id){
   var d = $q.defer();
   var result = cardDeckService.get(id, function() {
        $scope.card = $scope.cards[0];
        d.resolve(result);
   });
   return d.promise;
}

in case you havent used promises, they are a better way to do "callbacks"

there is mention of $then in a github checkin, but i havent seen anything on the angular documentation site. maybe it is now included to handle promises

edited May 23, 2017 at 10:32

CommunityBot

11 silver badge

answered Apr 26, 2013 at 15:50

Anton

7,7095 gold badges33 silver badges33 bronze badges

1 Comment

mooonli Over a year ago

Hi Anton. Thanks for your help. So how can I then access the result on the controller this way? I would like to implement the callback within the controller and pass it to the service as param.

superpuccio · Accepted Answer · 2014-03-12 12:00:58Z

I had the same problem in the past few days and I solved it this way:

cardDeckService.findCardDeckByID = function(id) {
        var toReturn = new Object();
        var something = cardDeckService.get({ cardDeckID : id }, function(){
            toReturn = something;
        });
        return toReturn;
    };

You first return an empty object (but NOT something that is "undefined"). When the DB call finishes AngularJS automagically updates the object toReturn. Also your view (if it is linked with the controller) will be updated.

The problem, doing your way, is that the findCardDeckByID returns an undefined value. So, $scope.card is undefined and it won't be automagically updated. Also your view, therefore, won't be updated.

Collectives™ on Stack Overflow

AngularJS Controller wait for response (or set callback)

3 Answers 3

11 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

11 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related