How to handle Highcharts events from an AngularJS directive?

问题

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: '<div></div>',
        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

<section ng-app='charts'>
    <div ng-controller="Ctrl">
       <highchart chart='{{example_chart}}'></highchart>
    </div>
</section>

回答1:

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

来源：https://stackoverflow.com/questions/16287727/how-to-handle-highcharts-events-from-an-angularjs-directive