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