example - ¿Cómo manejar eventos Highcharts desde una directiva AngularJS?

highcharts in angular 4

Question

Utilizando una directiva AngularJS, puedo cargar un gráfico de Highcharts. Sin embargo, mi controlador de eventos para hacer clic en un punto no se está ejecutando.

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>

Answer 1

Parece que funciona si utiliza los datos del ámbito directamente, por lo que es algo con el análisis JSON desde dentro del atributo. Tal vez la función intenta de alguna manera ser evaluado? Después de examinar la cadena de atributos con los datos del gráfico, puede ver el evento: la función contiene objetos en blanco.

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