1

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 が必要な場合に備えて:

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

2 に答える 2

1

$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
}
于 2016-01-13T12:05:36.480 に答える
1

簡単にするために、実行可能な JSFiddle デモを追加しました。以下は、そこにあるものの説明です。

サービス内で、コントローラーから呼び出される必要なメソッドを返します。

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() 内で、 を使用して promise を返し、$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(){....});
于 2016-01-13T12:07:36.597 に答える