AngularJS 지시문에서 Highcharts 이벤트를 처리하는 방법은 무엇입니까?

Question

AngularJS 지시문을 사용하여 Highcharts 그래프를로드 할 수 있습니다. 그러나 지점을 클릭하기위한 이벤트 처리기가 실행되고 있지 않습니다.

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

그것은 당신이 속성 내에서 JSON 구문 분석에 뭔가 직접 있도록 범위에서 데이터를 사용하는 경우 작동하는 것 같군. 아마도 함수가 어떻게 든 평가하려고 할 것입니까? 차트 데이터로 특성 문자열을 검토 한 후 이벤트 : 함수에 빈 개체가 있음을 확인할 수 있습니다.

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