Javascript 如何设置服务以传递google工作表ID？安格拉斯

我正在使用angular构建一个小部件，它接受用户提供的GoogleSheet ID，并以漂亮的json格式发布输出。问题是我的代码什么都不做。控制台中没有错误，当我添加ID时，不会发生任何事情

我想问题出在service.js

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

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", ["services"])
.config(["chartProvider", function (chartProvider) {
    chartProvider.setKey(1232456);
}]);

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

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

edit.html（添加工作表ID）

控制器

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


});

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

---

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

提供程序

，如下所示：

App.js

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

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", ["services"])
.config(["chartProvider", function (chartProvider) {
    chartProvider.setKey(1232456);
}]);

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

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

Service.js

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

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", ["services"])
.config(["chartProvider", function (chartProvider) {
    chartProvider.setKey(1232456);
}]);

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

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

Controller.js

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

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", ["services"])
.config(["chartProvider", function (chartProvider) {
    chartProvider.setKey(1232456);
}]);

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

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>

<!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>

{{key}}

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

希望这能对您有所帮助。

工作示例

示例路径：

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

最好的办法是有承诺

使用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('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 } )
     }


});

        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

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

<!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>

样品
{{data}}

服务中可能有2条返回语句？动议的声明：

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

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

---

在你的代码中工作是非常困难的。您应该提供一个测试插件或缺少的依赖项。我甚至不能开始跟踪你的错误，因为这。非常感谢你的例子，你的答案非常接近我所寻找的我实际上正在尝试为这个仪表板框架制作一个小部件，你可以在这里看到一个例子，你的例子工作得很好，但我不能适应小部件。你知道我应该在代码中修改什么吗。我试着从中找出一个答案，但由于许多依赖关系，这似乎很难。请再写一个问题或编辑当前内容，以便每个人都能理解这个问题。请再写一个问题