I have a custom directive that generates a dynamic Google chart. My goal is to activate an event handler on the controller's scope whenever the directive detects an event from the chart.
For example: http://plnkr.co/edit/yn4KuQfrYvlQNbPSWk3Q?p=preview
In my HTML:
<div column-chart="chartData" row-selected="rowSelected(index)"></div>
In my directive logic:
google.visualization.events.addListener(chart, 'select', function () {
console.log('directive#select', chart.getSelection());
// Trigger the "row-selected" function defined in the markup
});
In my controller:
$scope.rowSelected = function (index) {
console.log('controller#rowSelected', index);
// This is the function I want to be executed ultimately
};
Is it possible to achieve this with just one directive? Can the chart directive communicate with the row-selected directive? Any guidance would be greatly appreciated. Thank you.