How to handle Highcharts events from an AngularJS directive?

Question

Using an AngularJS directive, I am able to load a Highcharts graph. However, my event handler for clicking on a point is not being executed. http://plnkr.co/edit/pxU0IsBTrvcEwr2Znf5d?p=preview JS ``` var app = angular.module('charts', []); app.directive('highchart', function () { return { restrict: 'E', template: '

', replace: true, link: function (scope, element, attrs) { scope.$watch(function() { return attrs.chart; }, function() { if(!attrs.chart) return; var chart = JSON.parse(attrs.chart); $(element[0]).highcharts(chart); }); } } }); function Ctrl($scope) { $scope.example_chart = { xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }, plotOptions: { series: { cursor: 'pointer', point: { events: { click: function() { alert ('Category: '+ this.category +', value: '+ this.y); } } } } }, series: [{ data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] }] }; } ``` HTML ```

Accepted Answer

It seems to be working if you use the data from the scope directly so it's something with JSON parsing from within the attribute. Perhaps the function tries to somehow get evaluated? After examining the attribute string with the chart data, you can see the event: function contains blank objects.

plunker: http://plnkr.co/edit/QyccE0NDRfUCTuxTftUV?p=preview

How to handle Highcharts events from an AngularJS directive?

Solution

Problem