javascript - 为什么 promise 在循环之外不起作用？

Question

我正在尝试将 fusionCharts 动态添加到 AngularJS 页面中。我正在将图表数据加载到模型对象中，图表对象确实显示，但带有“无数据可显示”内容。

我的app.js:

(function () {

var modelListOfCharts = ["1", "4", "5", "6"];
var model = {};
var app = angular.module('chartDash', ["ng-fusioncharts"]);

app.controller('fussionController',["$scope","DataService", function ($scope, DataService) {
    $scope.chartData = {};

    DataService.getThings().then(function () {
        $scope.myListOfCharts = modelListOfCharts;
        $scope.chartData = model;
    });
}]);

app.service("DataService", ["$http", "$timeout", "$q", function ($http, $timeout, $q) {
    return {
        getThings: function () {
            var dfd = $q.defer();
            $timeout(function () {
                angular.forEach(modelListOfCharts, function(chartId) {
                    $http.get('/FusionCharts/GetChartData/', { params: { chartID: chartId } }).success(function (result) {
                        model[chartId] = result;
                    });
                });
                dfd.resolve(model);
            }, 300);
            return dfd.promise;
        }
    };
}]);
})();

我的html:

<div ng-controller="fussionController">
    <div ng-repeat="n in myListOfCharts">
        <h2>Chart number {{n}}</h2>
        <fusioncharts width="100%"
                      height="400"
                      type="MSCombi2D"
                      datasource="{{chartData[n]}}"></fusioncharts>
    </div>
</div>

当我输入 dfd.resolve(model); 时在循环内它可以工作，但只显示一张图表的数据。

    app.service("DataService", ["$http", "$timeout", "$q", function ($http, $timeout, $q) {
    return {
        getThings: function () {
            var dfd = $q.defer();
            $timeout(function () {
                angular.forEach(modelListOfCharts, function(chartId) {
                    $http.get('/FusionCharts/GetChartData/', { params: { chartID: chartId } }).success(function (result) {
                        model[chartId] = result;
                        dfd.resolve(model);
                    });
                });

            }, 300);
            return dfd.promise;
        }
    };
}]);

Answer 1

由于有多个http get，因此会有多个promise。所以你必须等待所有这些 promise 得到解决。试试这个。

app.service("DataService", ["$http", "$timeout", "$q", function ($http, $timeout, $q) {
    return {
        getThings: function () {
            var arrayOfPromises = [];
                angular.forEach(modelListOfCharts, function(chartId) {
                    arrayOfPromises.push($http.get('/FusionCharts/GetChartData/', { params: { chartID: chartId } }).success(function (result) {
                        model[chartId] = result;
                    }));
                 });

            return $q.all(arrayOfPromises);
        }
    };
}]);