AngularJS无法从服务加载数据

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

我的控制器看起来是这样的：

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


       } 

});

在我的服务，如果我使用功能 “bulletChartDataTest”，我得到正确的图形：

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

来源

2017-08-08 ProgSky

这是因为在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出厂功能，使真正的服务调用。

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

来源

2017-08-08 21:07:01 Shantanu

我对此有疑问。我如何扩展它以添加新图形？假设我有另一张带有json数据的图表。在这种情况下，我无法使用data =“chartData”。 – ProgSky

我在bulletData.json https://plnkr.co/edit/ssYa4HQBYOTq7OsasLA0?p=preview中创建了两个数据集，并创建了这个plunker，图只为这两个图创建了第二个数据集。 – ProgSky

@ProgSky https://plnkr.co/edit/A9UGduhC9Y9sPWVtCZ9x?p=preview只需在小部件数组中分配数据。 – Shantanu

AngularJS无法从服务加载数据

回答

相关问题