javascript - 如何在 Angular（UI 事件）中制作交互式谷歌图表？

Question

我想知道是否有一种在 Angular 中处理谷歌图表 API 事件的好方法？

（没有足够的声誉从这些参考文献中建立适当的链接：）

我正在使用 [bouil.github.io/angular-google-chart/]

并尝试移植 [github.com/angular-ui/ui-map/blob/master/ui-map.js]

使用 [github.com/angular-ui/ui-utils/blob/master/modules/event/event.js] 处理事件的方式。

---

这是一个显示非交互式图表的 plunker：

http://plnkr.co/edit/RTx8UgZdEvDmYoPUu4Xf

我想要发生的是，当在图表中进行选择时，会调用 foo() 方法（显示警报）。

---

模板：

<div data-google-chart chart="chart" class="chart" ui-event="{'chart-select':'foo()'}">

指示：

angular.module('googlechart.directives', ['ui.event']).directive('googleChart',     ['$timeout', '$window', function ($timeout, $window) {
    return {
        restrict: 'A',
        scope: {
            chart: '=chart'
        },
        link: function ($scope, $elm, $attr) {
            var eventNames="select ready onmouseover animationfinish error onmouseout";          

         /* ... Set up the chart and chartwrapper. */

            google.visualization.events.addListener($scope.chartWrapper, 'ready', function () {
                bindChartEvents($scope, eventNames, $scope.chartWrapper.getChart(), $elm);
            });

        }
    };
    function bindChartEvents(scope, eventsStr, chart, element) {
      angular.forEach(eventsStr.split(' '), function (eventName) {
          google.visualization.events.addListener(chart, eventName, function (event) {
              var newEventName = 'chart-' + eventName;
              element.triggerHandler(newEventName, event);
              if (!scope.$$phase){
                  scope.$apply();
              }
          });
      });
  }
}]);

Answer 1

我删除了 ui-event 部分并将事件侦听器直接注入到我传递给指令的图表对象中。

function bindChartEvents(scope) {
   if(typeof $scope.chart.methods !== "undefined" && typeof $scope.chart.methods.select  !== "undefined"){
        $scope.selectListener = google.visualization.events.addListener($scope.chartWrapper, "select", function (event) {
            $scope.chart.methods.select($scope.chartWrapper.getChart().getSelection(), event);
        });
    }
  });