Question

有人可以帮助我处理以下问题，我想在此处将数据从getJiraInfo(Service)传递给LineController(Controller)。

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

data: [65, 59]

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

请你参考Plunker来帮我解决这个问题吗？

Answer 1

在您的服务中，您没有从.then函数返回任何值，因此调用服务函数不会产生任何结果，您需要添加类似

的内容

return $q.when([selectedCount, inProgressCount]);

它会返回与您的相关数据相关的已解决承诺。

然后，您只需要调用promise并将数据传递到.then正文

中

<强>控制器：

getJiraInfo.getInfo().then(function(data) {
  // chartData will be setup when the response will arrive to your controller
  $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: data, 
      spanGaps: false,
    }]
  };
})

Answer 2

如您所知$http返回原始Promise。在您的示例中，您在服务中解决了它并且没有对结果做任何事情由于我们讨论异步调用，您可以使用$q创建新的Promise并在控制器端解析它。重点是返回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();
});

Answer 3

试试这个：

调用返回selectedCount和inProgessCount的服务方法。

app.controller('LineController', function($scope, getJiraInfo) {
 getJiraInfo.getInfo().then(function(response) {
 $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: [response.selectedCount , response.inProgressCount],//data passed here 
      spanGaps: false,
    }]
  };
})

}）;

将数据从AngularJS服务传递到AngularJS控制器

3 个答案:

完整代码：