javascript - 在 Angular Controller 中，如何在初始化另一个属性之前获取多个异步属性进行初始化

Question

在我的 Angular Controller 中，我有 4 个属性，所有属性都涉及调用我的工厂，使用 angulars $q 返回 promise 。

我对异步和 promise 的世界还很陌生，所以这可能是一个很容易解决的问题，但这就是我面临的问题。

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

这是我的 Controller 代码。基本上，tournamentName、tournamentPurse 需要在我设置 tournamentResults 之前设置好(因为它需要知道钱包)，然后在设置完之后我需要设置选秀权(它使用结果在高尔夫球场风格的应用程序中对球员选秀权进行评分) .

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

Answer 1

将 $q 服务注入(inject)你的 Controller ，代码看起来像这样

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