javascript - Angular (UI イベント) でインタラクティブな Google チャートを作成するには?

Question

Angular で Google チャート 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] でイベントを処理する方法。

---

非インタラクティブなチャートを表示するプランカーを次に示します。

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