我正在构建一个使用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>
