如何使用angular js在指令中提供点击事件？

Question

could you please tell me how to give click event in directive ? I make one chart using highchart.js (bar chart) .i want to give click event in that chart ?

I found using jquery they give like that .but how we can give in our directive ? click event example

http://jsfiddle.net/b4n9z19v/

How we give click event in out directive ? here is my code 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

Sorry. Here is the solution for your problem. If you are using an library, then they should provide call back or any other optional functions for you in angular.

If you don't find, and you find jquery you can use the same jquery functionality in angular using the same jquery code.

How do i do in Angular :-( ? Here in angular, Directives are used.

Code is below:

Html

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

Directive

    .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]
            }]
        });
            }
        }
    }]);

Working plunkr for you:

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

Answer 2

In jquery example you are passing function directly like

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

But in angular example you passing as a JSON string. So it cannot able to parse the function .

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

So in your angular example pass the input directly like what you did in jquery example. Then your code will work.