Как указать событие click в директиве с использованием угловых js?

Question

Не могли бы вы рассказать мне, как указать событие click в директиве? Я делаю одну диаграмму, используя highchart.js (гистограмма) .I хочу дать событие click в этой диаграмме?

Я нашел использование jquery, которое они дают так. Но как мы можем дать в нашей директиве? нажмите пример события

http://jsfiddle.net/b4n9z19v/

Как мы даем нажмите событие из директивы? вот мой код http://plnkr.co/edit/FtDfeyd6fjHL3RNwzyCn?p=preview

.directive('chart', function() { 
    return { 
     restrict: 'E', 
     template: '<div></div>', 
     scope: { 
      chartData: "=value", 
      chartObj: "=?" 
     }, 
     transclude: true, 
     replace: true, 
     link: function($scope, $element, $attrs) { 

      //Update when charts data changes 
      $scope.$watch('chartData', function(value) { 
       if (!value) 
        return; 

       // Initiate the chartData.chart if it doesn't exist yet 
       $scope.chartData.chart = $scope.chartData.chart || {}; 

       // use default values if nothing is specified in the given settings 
       $scope.chartData.chart.renderTo = $scope.chartData.chart.renderTo || $element[0]; 
       if ($attrs.type) 
        $scope.chartData.chart.type = $scope.chartData.chart.type || $attrs.type; 
       if ($attrs.height) 
        $scope.chartData.chart.height = $scope.chartData.chart.height || $attrs.height; 
       if ($attrs.width) 
        $scope.chartData.chart.width = $scope.chartData.chart.type || $attrs.width; 

       $scope.chartObj = new Highcharts.Chart($scope.chartData); 
      }); 
     } 
    }; 

}) 

Answer 1

К сожалению. Вот решение проблемы. Если вы используете библиотеку, то они должны предоставлять обратный вызов или любые другие необязательные функции для вас в угловом режиме.

Если вы не нашли, и вы найдете jquery, вы можете использовать одну и ту же функцию jquery в угловом режиме, используя один и тот же код jquery.

Как я сделать в угловых :-(Здесь в угловой, используются директивы

код ниже:.

Html

<div directive-name id="container" style="height: 400px"></div> 

Директива

.directive("directiveName", [function() { 
     return { 
      restrict: "A", 
      link: function ($scope, $element, $attributes) { 
      var char=$attributes.id; 

      $("#"+char).highcharts({ 
      chart: { 
       type: 'column' 
      }, 
      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] 
      }] 
     }); 
      } 
     } 
    }]); 

Рабочая plunkr для вас:

http://plnkr.co/edit/T5dPVVGE0E2LMUMRnDEX?p=preview

Answer 2

В Jquery примере вы передаете функцию непосредственно как

click: function() { 
        alert('Category: ' + this.category + ', value: ' + this.y); 
        } 

Но в угловом примере вы прохождения в виде строки JSON. Таким образом, он не может разобрать функцию.

"events": { 
       "click": "function() {alert('Category: ' + this.category + ', value: ' + this.y)}" 
} 

Так что в вашем угловом примере передайте вход прямо так, как вы делали в примере jquery. Тогда ваш код будет работать.