在角控制器中，如何在初始化另一个属性之前先初始化多个异步属性

In angular controller, how can I get multiple async properties to initialize before initializing another property

本文关键字：属性 初始化 异步 控制器 另一个      更新时间：2023-09-26

在我的Angular控制器中，我有4个属性，所有属性都涉及到对我的工厂的调用，这些调用使用angulars$q返回promise。

我对异步和承诺的世界相当陌生，所以这可能是一个需要解决的简单问题，但这是我面临的问题。

我想等到前两个异步调用返回后再执行第三个，然后必须在执行最后一个之前返回。我已经有了这个我正在创建的演示应用程序，它以前很好地与pub/sub合作来协调这一点，但我决定转换到Angular来了解更多关于它如何工作的信息。

这是我的控制器代码。基本上，锦标赛名称、锦标赛钱包需要在我设置锦标赛结果之前设置好（因为它需要知道钱包），然后在设置好所有这些之后，我需要设置选秀权（它使用结果在高尔夫池风格的应用程序中为球员的选秀权打分）。

demoApp.controller('SimpleController', function ($scope, simpleFactory) {
    $scope.tournamentName = '';
    $scope.tournamentPurse = '';
    $scope.tournamentResults = [];
    $scope.picks = [];
    init();
    function init() {
       $scope.tournamentName = simpleFactory.getTournamentName();
       $scope.tournamentPurse = simpleFactory.getTournamentPurse();
       $scope.tournamentResults = simpleFactory.getTournamentResults();
       $scope.picks = simpleFactory.getPicks();
    }
});

这里是我的一个工厂方法getTournamentName的代码，它使用YQL来获取名称。

    factory.getTournamentName = function() {
        var deferred = $q.defer();
        var query = "SELECT * FROM html WHERE url='http://espn.go.com/golf/leaderboard' AND xpath='"//h1[@class='tourney-name']'"";
        var encodedQuery = encodeURIComponent(query.toLowerCase()),
            url = 'http://query.yahooapis.com/v1/public/yql?q=' + encodedQuery + '&format=json&callback=JSON_CALLBACK';
        $http({method: 'JSONP', url: url}).
            success(function(data) {
                var tournamentName = data.query.results.h1.content;
                deferred.resolve(tournamentName);
            });
        return deferred.promise;
    };

将$q服务注入控制器，代码将类似于以下

$q.all([simpleFactory.getTournamentName(), simpleFactory.getTournamentPurse()]) //Wait for both operations to complete
    .then(function (results) {
       $scope.tournamentName = results[0];
       $scope.tournamentPurse = results[1];
       return simpleFactory.getTournamentResults();
     })
    .then(function (results) {
    $scope.tournamentResults = results;
    $scope.picks = simpleFactory.getPicks();    //this assignment can be done in next then, if we return promise
});
相关文章：