サービスを設定してGoogleシートIDを渡すにはどうすればよいですか？ AngularJS

私はangleを使って小さなウィジェットを構築しています。このwidgetは、ユーザーから与えられたGoogleシートIDを受け取り、素晴らしいjson形式で出力を公開します。問題は私のコードが何もしないことです。そこにはエラーがコンソールにありませんし、私はIDを何も追加しないときサービスを設定してGoogleシートIDを渡すにはどうすればよいですか？ AngularJS

が、私は問題が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 }) 
    } 


});

出典

2016-01-08 Imo

コードを実行するのは非常に困難です。あなたは、テストプランナーまたは欠けている依存関係を提供する必要があります。私はそれのためにバグの追跡を開始することさえできませんでした。 – Gal

あなたのコードは非常に不明瞭です。あなたが設定段階で設定することができ、適切なサービスを構築したい場合は、代わりにProviderを必要とし、そのような：

App.js

angular.module("adf.widget.charts", ["services"]) 
.config(["chartProvider", function (chartProvider) { 
    chartProvider.setKey(1232456); 
}]);

Service.js

angular.module("services", []) 
.provider("chart", [function() { 
    var googleSheetkey = null; 

    this.setKey = function (newKey) { 
     googleSheetkey = newKey; 
    }; 

    function GoogleSheetkey(key) { 
     this.googleSheetkey = key; 
    } 

    this.$get = [function() { 
     return new GoogleSheetkey(googleSheetkey); 
    }]; 
}]);

コントローラー.js

angular.module("adf.widget.charts") 
    .controller("piechartCtrl", ["$scope", "chart", 
     function ($scope, chart) { 
      $scope.key = chart.googleSheetkey; 
     } 
    ]);

Index.htmlと

<body ng-app="adf.widget.charts"> 
    <div ng-controller="piechartCtrl">{{key}}</div> 
</body>

Plunker

また、私は本当にあなたがプロバイダー、工場やサービスについて、このスレッドを見てお勧め：意志

AngularJS: Service vs provider vs factory

・ホープあなたを少し助けてください。

出典

2016-01-13 09:30:46 Gal

の作業例here

例パス：

https://docs.google.com/spreadsheet/pub?hl=en_US&hl=en_US&key=0AmYzu_s7QHsmdDNZUzRlYldnWTZCLXdrMXlYQzVxSFE&output=html

最良の方法は、約束

使用Qフレームワーク（$ qをサービス）である

のApp

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>

出典

2016-01-14 15:13:29 puemos

ありがとうございました。あなたの答えは私が探していたものに非常に近いです。私はこのダッシュボードフレームワークのためのウィジェットを作ろうとしています。https://github.com/angular-dashboardの例を見ることができます。 -framework/adf-widget-github/tree/master/srcあなたのサンプルは完全にそのまま動作しますが、私はウィジェットにそれを適用できません。コードで何を変更すればよいか考えてください。私はそれからplunkerを作ろうとしましたが、それは多くの依存関係のために難しいようです – Imo

別の質問を書いたり、現在の内容を編集してみんなが問題を理解できるようにしてください – puemos

他の質問を書いていますhttp://stackoverflow.com/questions/34810521/how-サービスからデータへの値渡し – Imo

サービスにおける2つのreturn文があったことだろうか？ステートメントの移動：

angular 
    .module('adf.widget.charts') 
    .service('chartService', chartService); 

    function chartService(){ 
     return { 
      getUrl: function(key) { 
       var googleSheetkey = key; 
       return googleSheetkey; 
      } 
     }; 
    }

出典

2016-01-15 03:45:49 BMcV

サービスを設定してGoogleシートIDを渡すにはどうすればよいですか？ AngularJS

答えて

関連する問題