Question

我无法从调用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);
});

我的dataservice看起来像这样：

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


                }

});

在我的服务中，如果我使用功能＆＃34; bulletChartDataTest＆＃34; ，我得到了正确的图表：

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

Answer 1

这是因为bulletChartDataTest数据已经可用＆amp;你回来了。但是在bulletChartData中，您正在进行实际的服务调用，这实际上会返回一个承诺。因此，当您在加载时定义数据以及配置选项时，因为在bulletChartData的情况下对dataservice的调用是异步的，所以它失败了＆amp;即使在成功返回数据后，它也不会令人耳目一新。所以你可以做的是在负载上调用服务。将数据放在控制器的作用域变量中，然后将该变量附加到data指令的nvd3属性上。所以这种方式一旦来自服务数据的响应将自动更新为图表＆amp;它将在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

AngularJS无法从服务加载数据

1 个答案: