Is there a way to implement a click event in a directive? I have created a bar chart using highcharts.js and I would like to add a click event to it. Can you provide an example of how to do this within our directive?
I see that using jQuery is one option, but I am curious about how we can achieve this using our own directive. Any examples of implementing a click event would be helpful.
How can we include a click event in our directive code? Here is the code snippet:
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;
// Initialize 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);
});
}
};
})