如何设置服务以传递谷歌表格 ID？ AngularJS答案

【问题标题】：How to setup service to pass google sheet IDs? AngularJS如何设置服务以传递谷歌表格 ID？ AngularJS
【发布时间】：2016-01-08 16:08:35
【问题描述】：

我正在使用 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 } )
     }


});

【问题讨论】：

在您的代码中工作非常困难。您应该提供一个 Testing Plunker 或缺少的依赖项。因此，我什至无法开始跟踪您的错误。

标签： javascript angularjs google-sheets tabletop.js

【解决方案1】：

工作示例here

示例路径：

https://docs.google.com/spreadsheet/pub?hl=en_US&hl=en_US&key=0AmYzu_s7QHsmdDNZUzRlYldnWTZCLXdrMXlYQzVxSFE&output=html

最好的方法是使用 Promise

使用q框架（$q服务）

将控制器中的逻辑移到服务中

应用

angular.module('myApp', []);

服务

angular.module("myApp")
  .service("chartService", function($q) {

    return {
      getSpreadsheet: function init(path) {
        var deferred = $q.defer();
        //if no path use the config key
        Tabletop.init({
          key: path,
          callback: deferred.resolve,
          simpleSheet: true
        });
        return deferred.promise;

      }
    }
  });

控制器

        angular.module('myApp')
  .controller('piechartCtrl', ['$scope', 'chartService', function($scope, chartService) {
    $scope.getSheet = function() {
      chartService.getSpreadsheet($scope.googleSheetPath).then(function(data) {
        $scope.data = data;
      })
    }
  }]);

index.html

<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
  <script src="tabletop.js"></script>
  <script src="script.js"></script>
</head>

<body ng-controller="piechartCtrl">

<form role="form" ng-submit="getSheet()">
  <div class="form-group">
    <label for="sample">Sample</label>
    <input type="text" class="form-control" id="sample" ng-model="googleSheetPath" placeholder="Enter path">
 <input type="submit" id="submit" value="Submit" />
  </div>
</form>
<div>

  {{data}}
</div>
</body>

</html>

【讨论】：

非常感谢您的示例，您的答案非常接近我正在寻找的内容示例按原样完美运行，但我无法使其适应小部件。知道我应该在代码中更改什么。我试图用它做一个笨拙的人，但由于许多依赖关系，这似乎很困难
请写另一个问题或编辑当前问题，以便每个人都能理解问题
写了另一个问题stackoverflow.com/questions/34810521/…

【解决方案2】：

服务中可能有 2 个返回语句吗？语句移动：

angular
    .module('adf.widget.charts')
    .service('chartService', chartService);

    function chartService(){
        return {
            getUrl: function(key) {
                var googleSheetkey = key;
                return googleSheetkey;
            }
        };  
    }

【讨论】：

【解决方案3】：

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

App.js

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

Service.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);
    }];
}]);

Controller.js

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

Index.html

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

Plunker

另外，我真的建议你看看这个关于提供者、工厂和服务的线程：

AngularJS: Service vs provider vs factory

希望对你有所帮助。

【讨论】：