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無法從服務加載數據

回答

相關問題