gpt4 book ai didi

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

转载 作者:数据小太阳 更新时间:2023-10-29 04:42:02 26 4
gpt4 key购买 nike

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

Controller

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&hl=en_US&key=0AmYzu_s7QHsmdDNZUzRlYldnWTZCLXdrMXlYQzVxSFE&output=html



最好的方法是使用 Promise

使用q框架($q服务)

移除 Controller 到服务的逻辑

应用

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;

}
}
});

Controller

        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,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34681319/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com