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

Question

我正在使用angular dashboard framework制作窗口小部件，但我坚持如何将服务中生成的数据值传递给控制器​​？我想将var new_x的值传递给控制器​​ - 它在函数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) 

我的代码是以防万一它是需要

“使用严格的”

angular.module('adf.widget.charts') 
    .service('chartService', function(){ 
    return { 
    getUrl: function init(path) { 
     Tabletop.init({ key: path, 
         callback: showInfo, 
         simpleSheet: true }) 
    } 
    } 

function showInfo(data, tabletop) { 

    var new_x = data.map(function(el) { 

    return { 
    "name": el[Object.keys(el)[0]], 
    "y": +el[Object.keys(el)[1]] 
    }; 

}); 
    console.log(JSON.stringify(new_x)) 

}; 

}) 


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

     loading: false 
    } 


}); 

chart.js之;

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)); 
    }); 

Answer 1

您呼叫从$范围的服务，更换线路，它应该修复它是这样的：

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 
} 

Answer 2

我已添加workable JSFiddle demo为您简化它。下面是对有什么的描述。

内为您服务，返回从控制器调用所需的方法：

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并通过一个承诺你将数据返回给它。

控制器内：

.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(){....});