如何将数据值从服务传递到控制器答案

【问题标题】：How to pass data values from serivces to controller如何将数据值从服务传递到控制器
【发布时间】：2016-01-15 11:54:10
【问题描述】：

我正在尝试为angular dashboard framework、sample widgets can be found here 制作一个小部件。我在尝试将 tabletop.js 集成到小部件中时感到震惊。我不知何故无法在控制器中获取数据。

我的代码：

use strict;

angular.module('adf.widget.charts', ['adf.provider', 'highcharts-ng'])
  .config(function(dashboardProvider){
    var widget = {
      templateUrl: '{widgetsPath}/charts/src/view.html',
      reload: true,
      resolve: {
        /* @ngInject */
        urls: function(chartService, config){
          if (config.path){
            return chartService.getSpreadsheet(config.path);
          }
        }
      },
      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));
  });

服务和控制器

'use strict';

    angular.module('adf.widget.charts')
       .service('chartService', function ($q){
        return {
          getSpreadsheet: function init(path){
            var deferred = $q.defer();
            Tabletop.init({
              key: path,
              callback: function(data, Tabletop) {
                deferred.resolve([data, Tabletop]);
          },
              simpleSheet: true,
              debug: true
            });
          }
        }

      })


      .controller('piechartCtrl', function ($scope, urls) {
       $scope.urls = urls;
       console.log(data) //I get error here data is not defined

    });

edit.html

<form role="form">
  <div class="form-group">
    <label for="path">Google Spreadsheet URL</label>
    <input type="text" class="form-control" id="path" ng-model="config.path" placeholder="Enter URL">
  </div>
</form>

view.html

<div>
  <div class="alert alert-info" ng-if="!chartConfig">
    Please insert a repository path in the widget configuration
  </div>
  <div ng-if="chartConfig">
    <highchart id="chart1" config="chartConfig"></highchart>
      </div>
</div>

此时我只是想从piechartCtrl 获取console.log 数据，但我无法这样做。我在控制台中唯一得到的是

您传递了一个新的 Google 电子表格网址作为键！试图解析。 tabletop.js:400 使用密钥 1voPzG2Sha-BN34bTK2eTe-yPtaAW2JZ16lZ3kaDWxCs 初始化

这意味着当我输入工作表 url 时，工作表已被处理，但我无法从这一点开始。谷歌表格网址

https://docs.google.com/spreadsheets/d/1voPzG2Sha-BN34bTK2eTe-yPtaAW2JZ16lZ3kaDWxCs/pubhtml

【问题讨论】：

标签： javascript jquery angularjs tabletop.js

【解决方案1】：

您可以使用 $broadcast 服务并在其中传递对象。例如，您可以通过以下方式从控制器广播事件：

$rootScope.$broadcast("sendingItemFromService",{"item": yourValue});

在其他控制器中，您甚至可以通过以下方式捕获它：

$scope.$on("sendingItemFromService", function(event, args) {
console.log(args.item);
});

【讨论】：

首先，如果您使用 $q 服务，您需要返回一个承诺。你必须在你的“getSpreadsheet”函数结束时返回“defer.promise”。其次，我无法理解你是如何调用“getSpreadsheet”函数的？如果您想从您的控制器中的服务中获取数据数据，则使用 $broadcast 方法或在您的控制器中（您要使用该值的地方）以下列方式调用该服务：chartService.getSpreadsheet(path).then(function(data) {console.log(data)})
好吧，我已经尝试过您的第二个选项，但是当我尝试执行此操作时没有任何反应 .controller('piechartCtrl', ['$scope', 'chartService', function($scope, chartService) { $scope.getSheet = function() { chartService.getSpreadsheet(path).then(function(data) { console.log(data) }) } }]);没有错误，控制台上没有任何内容
尝试在您的服务函数中返回“defer.promise”。附言在你的“getSpreadsheet()”函数中，你还需要指定一个错误回调函数，你应该在其中返回“defer.reject(errorArgument)”。我不熟悉角度仪表板框架和小部件的东西，所以我无法告诉您此错误回调的确切语法，但从您的代码中可以明显看出缺少错误回调函数。通过指定错误回调，您可以找出 defer.promise 中返回的错误原因