我想知道是否有一种在 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();
}
});
});
}
}]);