我正在使用angular构建一个小部件，该部件接受用户给定的Google表格ID，并以漂亮的json格式发布输出。问题是我的代码什么都不做。控制台中没有错误，当我添加ID时没有任何 react
我猜问题出在 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>