如何设置服务以传递谷歌工作表ID？AngularJS

Question

我正在构建一个使用angular的小部件,它使用用户给出的Google工作表ID并以漂亮的json格式发布输出.问题是我的代码什么也没做.控制台中没有错误,当我添加ID时没有任何反应

我猜问题出在service.js中

angular.module('adf.widget.charts')
.service('chartService', function(){
  return {
     getUrl: function(key){
     var googleSheetkey = key
     }
   }
   return googleSheetkey
  });

edit.html(添加工作表ID)

<form role="form">
  <div class="form-group">
    <label for="sample">Sample</label>
    <input type="text" class="form-control" id="sample" ng-model="config.googleSheetkey" placeholder="Enter path">
  </div>
</form>

App.js

angular.module('adf.widget.charts', ['adf.provider', 'nvd3'])
  .config(function(dashboardProvider){
    var widget = {
      templateUrl: '{widgetsPath}/charts/src/view.html',
      reload: true,
      resolve: {
        /* @ngInject */
        urls: function(chartService, config){
          if (config.key){
            return chartService.getUrl(config.googleSheetkey);
          }
        }
      },
      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));
  });

调节器

angular.module('adf.widget.charts')
  .controller('piechartCtrl', function (chartService, $scope) {
    window.onload = function() { init() };
     function init() {
       Tabletop.init( { key: chartService.googleSheetkey,
                        callback: function(data, tabletop) { console.log(data) },
                         simpleSheet: true } )
     }


});

Answer 1

你的代码非常不清楚。如果您想构建一个可以在配置阶段设置的适当服务，则需要一个Provider，如下所示：

应用程序.js

angular.module("adf.widget.charts", ["services"])
.config(["chartProvider", function (chartProvider) {
    chartProvider.setKey(1232456);
}]);

服务.js

angular.module("services", [])
.provider("chart", [function () {
    var googleSheetkey = null;

    this.setKey = function (newKey) {
        googleSheetkey = newKey;
    };

    function GoogleSheetkey(key) {
        this.googleSheetkey = key;
    }

    this.$get = [function () {
        return new GoogleSheetkey(googleSheetkey);
    }];
}]);

控制器.js

angular.module("adf.widget.charts")
   .controller("piechartCtrl", ["$scope", "chart",
        function ($scope, chart) {
            $scope.key = chart.googleSheetkey;
      }
    ]);

索引.html

<body ng-app="adf.widget.charts">
  <div ng-controller="piechartCtrl">{{key}}</div>
</body>

普朗克

另外，我真的建议你看看这个关于提供商、工厂和服务的帖子：

AngularJS：服务、提供商、工厂

希望这会对您有所帮助。