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

我正在构建一个使用angular的小部件,它使用用户给出的Google Sheet Ids并以漂亮的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 } )
     }
 
 
});

解决方法

工作示例 here

示例路径：

https://docs.google.com/spreadsheet/pub?hl=en_US\u0026amp;hl=en_US\u0026amp;key=0AmYzu_s7QHsmdDNZUzRlYldnWTZCLXdrMXlYQzVxSFE\u0026amp;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>

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

解决方法

猜你在找的JavaScript相关文章