Bộ điều khiển AngularJS chờ phản hồi (hoặc thiết lập gọi lại)

Question

Tôi có ứng dụng AngularJS với bộ điều khiển.js và factories.js.

Điều tôi thích là làm điều gì đó với các giá trị trong bộ điều khiển (mà tôi nhận được từ các nhà máy). Vấn đề của tôi là, những giá trị này trống vào thời điểm tôi truy cập chúng.

Tôi có thể đợi phản hồi bằng cách nào? Hoặc tôi có thể thêm một cuộc gọi lại ở đâu?

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

Điều tôi muốn là nhận chiếc xe đầu tiên ($ scope.cards [0]) và lưu nó dưới $ scope.card. Nhưng nó luôn trống rỗng (giống với cardsLength).

Mặt khác, nếu tôi in kích thước từ chế độ xem một phần bằng (cards.length), tôi nhận được giá trị chính xác. .

Greets và cám ơn Marc

Answer 1

Bạn có thể lấy lại lời hứa bằng cách truy cập giá trị $ sau đó (có để đi vào mã nguồn để thấy rằng):

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

chỉnh sửa: $ sau đó trở lại phản hồi http

Answer 2

như lucuma gợi ý, điều này có thể được xử lý bằng lời hứa. http://api.jquery.com/promise/ cho jquery lời hứa http://docs.angularjs.org/api/ng.$q lời hứa góc được dựa trên jquery lời hứa

câu trả lời này có một giải pháp tương tự cho nhiều truy vấn để hoàn AngularJS - wait for multiple resource queries to complete

nên thay vì

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

sử dụng

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

trong trường hợp bạn không sử dụng lời hứa, chúng là cách tốt hơn để thực hiện "callbacks"

có đề cập đến $ sau đó trong kiểm tra github, nhưng tôi không thấy gì trên trang tài liệu góc. có lẽ nó bây giờ được bao gồm để xử lý những lời hứa

Answer 3

tôi đã cùng một vấn đề trong vài ngày qua và tôi giải quyết nó theo cách này:

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

Bạn đầu tiên trả về một đối tượng rỗng (nhưng không phải cái gì đó là "không xác định "). Khi cuộc gọi DB kết thúc, AngularJS tự động cập nhật đối tượng toReturn. Ngoài ra xem của bạn (nếu nó được liên kết với bộ điều khiển) sẽ được cập nhật.

Vấn đề, theo cách của bạn, là findCardDeckByID trả về giá trị undefined. Vì vậy, $scope.card không xác định và sẽ không được cập nhật tự động. Do đó, chế độ xem của bạn sẽ không được cập nhật.