javascript - AngularJS 无法从服务加载数据

Question

我无法从调用 API 的服务向 Controller 发送数据。我用过http://embed.plnkr.co/jEQMch/作为示例应用程序并对其进行修改以创建子弹图。

我的 Controller 如下所示:

var app = angular.module('plunker', ['nvd3', 'gridster', 'plunker.services']);

app.controller('MainCtrl', function($scope, $timeout, DataService) {
  $scope.gridsterOptions = {
        margins: [20, 20],
        columns: 4,
        mobileModeEnabled: false,
        draggable: {
            handle: 'h3'
        },
        resizable: {
     enabled: true,
     handles: ['n', 'e', 's', 'w', 'ne', 'se', 'sw', 'nw'],
    },
    };

 $scope.options = {
            chart: {
                type: 'bulletChart',
                transitionDuration: 500
            }
        };

  $scope.data = {}

    $scope.dashboard = {
        widgets: [  
      {
            col: 0,
            row: 0,
            sizeY: 3,
            sizeX: 2,
            name:"Test",
            chart:  
             {
              options: DataService.bulletChart.options(),
              data: DataService.bulletChart.data(),
              api: {} 
            } 
          },
    ]
    };

  // We want to hide the charts until the grid will be created and all widths and heights will be defined.
  // So that use `visible` property in config attribute
  $scope.config = {
    visible: false
  };
  $timeout(function(){
    $scope.config.visible = true;
  }, 200);
});

我的数据服务如下所示:

angular.module('plunker.services', [])
.factory('DataService', function($http, $q) {
    return{
      bulletChart: {
            options: bulletChartOptions,
            data: bulletChartData
            } 
        };

/**
     *  Data & Options Generators
*/
    function bulletChartOptions() {
      return {
            chart: {
                 type: 'bulletChart',
       margin : {
                    top: 40,
                    right: 20,
                    bottom: 0,
                    left: 130
                },     
                showValues: true,
                duration: 500,
            }
        }
    }
    function bulletChartDataTest() {
        return   {
            "title": "Test",
            "subtitle": "Completed",
            "ranges": [200,400,709],
            "measures": [694],
            "markers": [300]  
            } 
        }

    function bulletChartData(){
            $http.get('http://myapi/data').then(function(response) {
                   console.log('response-dataFound',response.data);
                  //$bulletChart.data = angular.copy(response.data);
                  return response.dat
                  ;})


                }

});

在我的服务中，如果我使用函数“bulletChartDataTest”，我会得到正确的图表:

当我切换到 bulletChartData 时，我没有得到任何图表。我认为 data:bulletChartData 无法正常工作。我的 bulletChartData 方法出了什么问题？有什么指点吗？

Answer 1

这是因为在 bulletChartDataTest 中数据已经可用，您只需返回它即可。但在 bulletChartData 中，您正在进行实际的服务调用，该调用实际上返回了一个 promise 。因此，当您在加载时定义数据和配置选项时，由于在bulletChartData的情况下对数据服务的调用是异步的，所以它会失败并且即使在成功返回数据后也不会刷新。因此，您可以做的是在加载时调用服务并将数据保存在 Controller 的范围变量中，然后将该变量附加到 View 上的 nvd3 指令的 data 属性。因此，一旦来自服务数据的响应就会自动更新图表并在 DOM 中创建。

    <nvd3 options="widget.chart.options" data="chartData" api="widget.chart.api" 
          config="config" events="events"></nvd3>

并在 Controller 中进行服务调用以获取图表数据，例如:

DataService.bulletChart.servicedata().then(function(data){
    $scope.chartData = data;
});

这里的servicedata是进行真正的服务调用的工厂函数。

您的工作插件版本:https://plnkr.co/edit/WG6PJO?p=preview