Angular Chart.js 无法使用 $http 调用

Question

我正在使用 angular chart 填充饼图。为了填充图表，我需要在服务中调用 $http.get() 并从控制器调用服务方法。但是，如果我进行 $http 调用，图表将无法正常工作。

angular.module('shopAdminApp')
.service('ChartService', ['$http',ChartService])

function ChartService($http) {

    this.GetAllChartData = function (month, year) {
        return $http.get('GetMonthlyStatistics?month=' + month + '&&year=' + year + '');
    }
}

angular.module('shopAdminApp')
.controller('chartCtrl', ["ChartService", ChartCtrl]);


function ChartCtrl(ChartService) {
   // this.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales"];
   // this.data = [10, 20, 100];
    
    var promise = ChartService.GetAllChartData(12, 2012);
    promise.then(function (response) {
        console.log(response.data);
        this.chartsdata = response.data;
        this.labels = response.data.BranchNames;
        this.data = response.data.BranchMonthlyTotalSales;
    });
   
  //  console.log(this.chartsdata);
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<canvas id="pie1" class="chart chart-pie" data="chart.data" labels="chart.labels" height="300" width="400"></canvas>

如果我取消对评论部分的评论，饼图可以正常工作，但我需要使用 $http 调用来填充值。我该怎么做？

Answer 1

像这样尝试：

function ChartCtrl(ChartService) {
    var self = this;

    var promise = ChartService.GetAllChartData(12, 2012);
    promise.then(function (response) {
        self.chartsdata = response.data;
        self.labels = response.data.BranchNames;
        self.data = response.data.BranchMonthlyTotalSales;
    });
}

你必须记住 this 关键字引用当前上下文，所以当你在 promise 回调函数中时 this 不再指向你的控制器，而是指向回调函数本身。

Angular Chart.js 无法使用 $http 调用

Angular Chart.js is not working with $http call

javascript

charts

angularjs