AngularJS Controller auf Antwort warten (oder Callback setzen)

Question

Ich habe eine AngularJS-Anwendung mit einer controllers.js und factories.js.

Was ich mag ist, etwas mit den Werten in der Steuerung (die ich von den Fabriken bekomme) zu tun. Mein Problem ist, dass diese Werte zum Zeitpunkt des Zugriffs leer sind.

Wie kann ich auf die Antwort warten? Oder wo kann ich einen Rückruf hinzufügen?

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

Ich mag es, das erste Auto ($ scope.cards [0]) und es unter $ scope.card speichern. Aber es ist immer leer (selbe mit cardsLength).

Auf der anderen Seite, wenn ich die Größe aus der Teilansicht mit (cards.length) ausdrucken, bekomme ich den richtigen Wert. .

Greets und Dank Marc

Answer 1

Sie können durch den Zugriff auf Wert das Versprechen zurück $ dann (auf den Quellcode zu gehen, dass zu finden):

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

bearbeiten: $ dann Rückkehr die HTTP-Antwort

Answer 2

wie lucuma vorschlägt, kann dies wahrscheinlich mit einem Versprechen behandelt werden. http://api.jquery.com/promise/ für die jquery Versprechen http://docs.angularjs.org/api/ng.$q die Winkel Versprechen auf dem jquery Versprechen basiert

diese Antwort hat eine ähnliche Lösung für mehrere Abfragen AngularJS - wait for multiple resource queries to complete

so statt

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

Verwendung abzuschließen

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

für den Fall, dass Sie Versprechen nicht verwendet haben, sind sie eine bessere Möglichkeit, "Rückrufe" zu tun

gibt es die Erwähnung von $ dann in einem GitHub Checkin, aber ich habe nichts auf der eckigen Dokumentations-Website gesehen. vielleicht ist es jetzt Versprechungen enthalten behandelt

Answer 3

ich das gleiche Problem in den letzten Tagen hatte ich es auf diese Weise gelöst:

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

Sie zuerst ein leeres Objekt zurück (aber nicht etwas, das „nicht definiert ist "). Wenn der DB-Aufruf beendet wird, aktualisiert AngularJS automatisch das Objekt toReturn. Auch Ihre Ansicht (wenn sie mit dem Controller verbunden ist) wird aktualisiert.

Das Problem, Ihren Weg zu tun, ist, dass die findCardDeckByID einen undefined Wert zurückgibt. Also, $scope.card ist nicht definiert und es wird nicht automatisch aktualisiert. Auch Ihre Ansicht wird daher nicht aktualisiert.