为什么不在循环中时，诺言不起作用？

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获取，因此会有多个承诺。 因此，您必须等待所有这些承诺都得到解决。 尝试这个。

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

Answer 2

您需要为每个图表创建一个promise，然后等待它们全部解决：

app.service("DataService", ["$http", "$timeout", "$q",
  function($http, $timeout, $q) {
    return {
      getThings: function() {
        var promises;

        $timeout(function() {
          promises = modelListOfChart.map(function(chartId) {
            var dfd = $q.defer();
            $http.get('/FusionCharts/GetChartData/', {
              params: {
                chartID: chartId
              }
            }).success(function(result) {
              model[chartId] = result;
              dfd.resolve(model);
            });
            // Might want to add a reject for errors...

            return dfd;
          });
        }, 300);

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