javascript - 将数据从 AngularJS 服务传递到 AngularJS Controller

Question

谁能帮我解决下面的问题，这里我想将数据从 getJiraInfo(Service) 传递到 LineController(Controller)。

Plunker

在 Line Controller 中，目前，我已将值硬编码为

data: [65, 59]

但我想将这些值从 getJiraInfo 服务动态传递到数据字段，作为 data : [toDoCount,inProgressCount]

你能通过推荐 Plunker 帮助我解决这个问题吗？

Answer 1

如您所知，$http 返回原始 Promise。在您的示例中，您在服务中解决了它并且对结果没有做任何事情。由于我们讨论异步调用，您可以使用 $q 创建新的 Promise 并在 Controller 端解析它。要点是返回 deferred.promise; - 包含 resolve 和 reject 回调的对象。

您的服务看起来像工厂 a.e.:

return {
    getInfo: function() {/**/}
}

将其更改为service 语法 a.e:

 this.getInfo = function() {/**/};

或者使用factory a.e.

app.factory('getJiraInfo', function($http, $filter,$q) {/**/};

---

您已经定义了图表选项，所以只剩下更新数据了:

getJiraInfo.getInfo().then(function(results) {
     $scope.chartData.datasets.data = results;
  });

FIXED DEMO

完整代码:

var app = angular.module('myApp', ['tc.chartjs']);


app.service('JiraInfo', ['$http', '$filter','$q',function($http, $filter,$q) {

    this.getInfo = function() {

      var deferred = $q.defer();

       $http({
        method: 'GET',
        url: 'defect.json'

      }).then(function(response) {
        selectedCount = $filter('filter')(response.data.issues, function(
          inputs) {
          if (inputs.fields.status.name == 'To Do') return inputs;
        });

        inProgressCount = $filter('filter')(response.data.issues, function(
          inputs) {
          if (inputs.fields.status.name == 'IN PROGRESS') return inputs;
        });
     // console.log(inProgressCount.length,selectedCount.length);


        var data = {
          val:[inProgressCount.length,selectedCount.length]
        };

        deferred.resolve(data);  

      }, function (error) {
         deferred.reject(error); 
      });

       return deferred.promise;
    };
}]);


app.controller('LineController', function($scope, JiraInfo) {

  $scope.chartData = {
    labels: ["In Progress", "To Do"],
    datasets: [{
      label: "Weekly Report",
      fill: false,
      lineTension: 0.1,
      backgroundColor: "rgba(75,192,192,0.4)",
      borderColor: "rgba(75,192,192,1)",

      pointHoverBorderWidth: 2,
      pointRadius: 1,
      pointHitRadius: 10,
      data: [0,0],
      spanGaps: false,
    }]
  };

  $scope.chartOptions = {
    responsive: true,
    maintainAspectRatio: false,

  };

  function run(){
    JiraInfo.getInfo().then(function(resp) {
    console.log(resp.val);
     $scope.chartData.datasets[0].data = resp.val;
  });
  }


  $scope.onChartClick = function(event) {
    console.log('LineController', 'onChartClick', event);
  }

  run();
});