javascript AngularJS 控制器等待响应(或设置回调)

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/16239137/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 03:50:41  来源:igfitidea点击:

AngularJS Controller wait for response (or set callback)

javascripthtmlangularjs

提问by mooonli

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

我有一个带有 controller.js 和 factory.js 的 AngularJS 应用程序。

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).

我喜欢的是拿到第一辆车 ($scope.cards[0]) 并将它保存在 $scope.card 下。但它总是空的(与cardsLength相同)。

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

另一方面,如果我用 (cards.length) 从局部视图中打印出尺寸,我会得到正确的值。

Greets and Thanks Marc

问候和感谢马克

采纳答案by Guillaume86

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

您可以通过访问 value.$then 来取回承诺(必须去源代码中找到):

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

编辑: $then 返回 http 响应

回答by Anton

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.$qthe angular promise is based on the jquery promise

正如 lucuma 所暗示的那样,这可能可以通过承诺来处理。 http://api.jquery.com/promise/对于 jquery 承诺 http://docs.angularjs.org/api/ng.$q角度承诺基于 jquery 承诺

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

这个答案对于多个查询完成AngularJS有类似的解决方案 ——等待多个资源查询完成

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"

如果您没有使用过 Promise,它们是执行“回调”的更好方法

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

在 github 签入中提到了 $then,但我在 angular 文档站点上没有看到任何内容。也许现在包括处理承诺

回答by superpuccio

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.

您首先返回一个空对象(但不是“未定义”的对象)。当 DB 调用完成时,AngularJS 会自动更新对象toReturn。您的视图(如果它与控制器链接)也将更新。

The problem, doing your way, is that the findCardDeckByIDreturns an undefinedvalue. So, $scope.cardis undefined and it won't be automagically updated. Also your view, therefore, won't be updated.

问题是,按照你的方式,findCardDeckByID返回一个undefined值。所以,$scope.card是未定义的,它不会自动更新。因此,您的视图也不会更新。