javascript - 如何将数据值从服务传递到 Controller

Question

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

我的代码:

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));
  });

服务和 Controller

'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

    });

编辑.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>

查看.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 电子表格网址作为 key !正在尝试解析。tabletop.js:400 使用 key 1voPzG2Sha-BN34bTK2eTe-yPtaAW2JZ16lZ3kaDWxCs 进行初始化

这意味着当我输入工作表 URL 时，工作表就会被处理，但我无法从这一点开始。 Google 表格网址

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

Answer 1

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

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

在其他 Controller 中，您甚至可以通过以下方式捕获此问题:

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