Javascript 如何在Angularjs中将值从服务传递给控制器

我正在使用创建一个小部件，但我一直在研究如何将服务中生成的数据值传递给控制器？我想将var new_x的值传递给controller-in-services，它是在函数showInfo中生成的。但我在将其添加到控制器时遇到以下错误：

TypeError: Cannot read property 'showInfo' of undefined
    at new <anonymous> (piechartCtrl.js:62) *(piechartCtrl.js:62 is data: $scope.chartService.showInfo())* 
    at invoke (angular.js:4523)
    at Object.instantiate (angular.js:4531)
    at angular.js:9197
    at $q.all.then.msg (widget-content.js:115)
    at processQueue (angular.js:14792)
    at angular.js:14808
    at Scope.$get.Scope.$eval (angular.js:16052)
    at Scope.$get.Scope.$digest (angular.js:15870)
    at Scope.$get.Scope.$apply (angular.js:16160)

.controller('piechartCtrl', function (chartService, $scope) {
   chartService.showInfo()
    .then(function(data){
      //your returned data
    });

Chart.js，以备不时之需：

'use strict';

angular.module('adf.widget.charts', ['adf.provider', 'highcharts-ng'])
  .config(function(dashboardProvider){
    var widget = {
      templateUrl: '{widgetsPath}/charts/src/view.html',
      reload: true,
      resolve: {
        /* @ngInject */
        urls: function(chartService, config){
          if (config.path){
            return chartService.getUrl(config.path);
          }
        }
      },
      edit: {
        templateUrl: '{widgetsPath}/charts/src/edit.html'
      }
  };

  dashboardProvider
      .widget('piechart', angular.extend({
        title: 'Custom Piechart',
        description: 'Creates custom Piechart with Google Sheets',
        controller: 'piechartCtrl'
        }, widget));
  });

---

您正在从$scope调用该服务，请替换该行，它应按如下方式修复该行：

  series: [{
            data: chartService.showInfo()
        }],

.controller('piechartCtrl', function (chartService, $scope) {
 $scope.chartConfig = {
    options: {
        chart: {
            type: 'pie'
        }
    },
    series: [{
        data: chartService.showInfo()
    }],
    title: {
        text: 'Add Title here'
    },

    loading: false
}

您的控制器将如下所示：

  series: [{
            data: chartService.showInfo()
        }],

.controller('piechartCtrl', function (chartService, $scope) {
 $scope.chartConfig = {
    options: {
        chart: {
            type: 'pie'
        }
    },
    series: [{
        data: chartService.showInfo()
    }],
    title: {
        text: 'Add Title here'
    },

    loading: false
}

我已经为您添加了一个简化。下面是对存在的内容的描述

在服务内部，返回要从控制器调用的所需方法：

angular.module('adf.widget.charts')
   .service('chartService', function($q){

      var chartService = {};

      charService.showInfo = function(){

          var new_x = data.map(function(el) {
            return $q.resolve( {
                name: el[Object.keys(el)[0]],
                y: el[Object.keys(el)[1]]
            });

     }
     ...
     return chartService;

   }

注意：在showInfo（）中，确保使用

$q

返回承诺，以执行调用

$q.resolve

并将返回的数据传递给它

在控制器内部：

TypeError: Cannot read property 'showInfo' of undefined
    at new <anonymous> (piechartCtrl.js:62) *(piechartCtrl.js:62 is data: $scope.chartService.showInfo())* 
    at invoke (angular.js:4523)
    at Object.instantiate (angular.js:4531)
    at angular.js:9197
    at $q.all.then.msg (widget-content.js:115)
    at processQueue (angular.js:14792)
    at angular.js:14808
    at Scope.$get.Scope.$eval (angular.js:16052)
    at Scope.$get.Scope.$digest (angular.js:15870)
    at Scope.$get.Scope.$apply (angular.js:16160)

.controller('piechartCtrl', function (chartService, $scope) {
   chartService.showInfo()
    .then(function(data){
      //your returned data
    });

}

另外，请确保您执行以下操作：

将控制器定义与服务定义分开，并在控制器模块中指定对服务模块的依赖关系

在单独的模块中定义服务：

angular.module("services", [])
.factory("myService", function(){.....});

和控制器在不同的模块中，并识别相关性

angular.module("controllers", ["services"])
.controller("myController", function(){....});

---

感谢您的回答，但我仍然收到此错误参考错误：未定义showInfo检查更新的答案，plz在服务和控制器之间进行分离，并在控制器中指定对服务的依赖性，然后更新检查再次更新的答案，该答案具有关于我将数据从服务返回到控制器的方式的新更新。您必须将返回的数据包装在$q.resolve内才能返回承诺。。它肯定会起作用的。。还有一个JSFIDLE addedI中的工作示例仍然得到这个错误showInfo没有定义，可能是一个调用的异步函数导致了这个问题检查工作中的演示并找出缺少的或与代码不同的地方