我无法从调用api的服务向控制器发送数据。我已将http://embed.plnkr.co/jEQMch/用作示例应用程序,并对其进行了修改以创建项目符号图。

我的控制器如下所示:

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”,则会得到正确的图形:
javascript - AngularJS无法从服务加载数据-LMLPHP

切换到bulletChartData时,没有任何图形。
我认为data: bulletChartData无法正常工作。我的bulletChartData方法有什么问题?有指针吗?

最佳答案

这是因为bulletChartDataTest中的数据已经可用,而您只是将其返回。但是在bulletChartData中,您正在进行实际的服务调用,该服务调用实际上返回了承诺。因此,当您在加载时定义数据以及配置选项时,由于在bulletChartData情况下对dataservice的调用是紧急的,因此即使成功返回数据后,它也会失败且不会刷新。因此,您可以做的是在加载时调用服务,并将数据放入控制器的作用域变量中,然后将该变量附加到视图中data指令的nvd3属性。因此,这样一来,一旦来自服务数据的响应就会自动针对图表进行更新,并将在DOM中创建。

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


并在控制器中进行服务调用以获取图表数据,例如:

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


这里servicedata是用于进行实际服务调用的工厂功能。

您使用的工作监听器版本:https://plnkr.co/edit/WG6PJO?p=preview

10-05 20:39
查看更多