如何设置服务通过谷歌图表ID？ AngularJS [英] How to setup service to pass google sheet IDs? AngularJS
本文介绍了如何设置服务通过谷歌图表ID？ AngularJS的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我建立采用了棱角分明的小窗口小部件，采用由用户给出的谷歌图表ID和发布尼斯JSON格式的输出。问题是，我的code什么都不做。没有错误在控制台，当我添加的ID没有任何反应。
我想这个问题是在 service.js
angular.module（'adf.widget.charts'）
。服务（'的ChartService'，函数（）{
返回{
的getURL：功能（键）{
VAR googleSheetkey =键
}
}
返回googleSheetkey
}）;
edit.html（添加表ID）
＆LT;形式的作用=形式＆GT;
＆LT; DIV CLASS =表单组＆GT;
＆LT;标签=样品＆GT;采样＆LT; /标签＆gt;
＆LT;输入类型=文本级=表格控ID =样品NG-模式=config.googleSheetkey占位符=输入路径＆GT;
＆LT; / DIV＆GT;
＆LT; /表及GT;
App.js
angular.module（'adf.widget.charts'，['adf.provider'，'nvd3']）
的.config（功能（dashboardProvider）{
VAR部件= {
templateUrl：{} widgetsPath /charts/src/view.html'，
重载：真的，
解析：{
/ * * @ngInject /
网址：功能（的ChartService，配置）{
如果（config.key）{
返回chartService.getUrl（config.googleSheetkey）;
}
}
}，
编辑：{
templateUrl：{} widgetsPath /charts/src/edit.html
}
}; dashboardProvider
.widget（饼图，angular.extend（{
标题：自定义饼图，
说明：创建一个与谷歌定制表饼图，
控制器：'piechartCtrl
}，插件））;
}）;
控制器
angular.module（'adf.widget.charts'）
.controller（'piechartCtrl'，函数（的ChartService，$范围）{
在window.onload =函数（）{的init（）};
功能的init（）{
Tabletop.init（{键：chartService.googleSheetkey，
回调：功能（数据，桌面）{执行console.log（数据）}，
simpleSheet：真}）
}
}）;
解决方案
工作实例的此处
示例路径：
<$c$c>https://docs.google.com/s$p$padsheet/pub?hl=en_US&hl=en_US&key=0AmYzu_s7QHsmdDNZUzRlYldnWTZCLXdrMXlYQzVxSFE&output=html
搜索结果
最好的办法是与承诺
使用q框架（$ Q服务）
从控制器逻辑到服务
应用
angular.module（'对myApp'，[]）;
服务
angular.module（对myApp）
。服务（的ChartService功能（$ Q）{ 返回{
获得preadsheet：功能的init（路径）{
变种推迟= $ q.defer（）;
//如果没有路径使用的配置重点
Tabletop.init（{
键：路径，
回调：deferred.resolve，
simpleSheet：真
}）;
返回deferred.promise; }
}
}）;
控制器
angular.module（'对myApp'）
.controller（'piechartCtrl'，['$范围'，'的ChartService'，函数（$范围的ChartService）{
$ scope.getSheet =功能（）{
chartService.getS preadsheet（$ scope.googleSheetPath）。然后（功能（数据）{
$ scope.data =数据;
}）
}
}]）;
的index.html
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML NG-应用=对myApp＆GT;＆LT; HEAD＆GT;
＆LT;链接rel =stylesheet属性HREF =style.css文件＆GT;
＆所述; SCRIPT SRC =https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js＆GT;＆下; /脚本＆GT;
＆所述; SCRIPT SRC =tabletop.js＆GT;＆下; /脚本＆GT;
＆所述; SCRIPT SRC =的script.js＆GT;＆下; /脚本＆GT;
＆LT; /头＆GT;＆LT;机身NG控制器=piechartCtrl＆GT;＆LT;形式的作用=形式NG提交=getSheet（）＆GT;
＆LT; DIV CLASS =表单组＆GT;
＆LT;标签=样品＆GT;采样＆LT; /标签＆gt;
＆LT;输入类型=文本级=表格控ID =样品NG-模式=googleSheetPath占位符=输入路径＆GT;
＆LT;输入类型=提交ID =提交值=提交/＆GT;
＆LT; / DIV＆GT;
＆LT; /表及GT;
＆LT; DIV＆GT; {{数据}}
＆LT; / DIV＆GT;
＆LT; /身体GT;＆LT; / HTML＆GT;
I am building a small widget using angular that takes Google sheet Ids given by user and publishes the output in nice json format. The problem is that my code does nothing. There are no errors in the console and when I add ID nothing happens
I guess the problem is in service.js
angular.module('adf.widget.charts')
.service('chartService', function(){
return {
getUrl: function(key){
var googleSheetkey = key
}
}
return googleSheetkey
});
edit.html (to add Sheet 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 } )
}
});
解决方案
Working example here
Example path:
https://docs.google.com/spreadsheet/pub?hl=en_US&hl=en_US&key=0AmYzu_s7QHsmdDNZUzRlYldnWTZCLXdrMXlYQzVxSFE&output=html
Best way is with Promise
Use q framework ($q service)
Remove the logic from the controller to the service
App
angular.module('myApp', []);
Service
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>
这篇关于如何设置服务通过谷歌图表ID？ AngularJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
