如何使用angular js在指令中提供點擊事件？

Question

您能告訴我如何在指令中提供click事件嗎？ 我使用highchart.js（條形圖）制作一張圖表。我想在該圖表中提供點擊事件嗎？

我發現使用jquery他們給那樣。但是如何在指令中給呢？ 點擊事件示例

http://jsfiddle.net/b4n9z19v/

我們如何在out指令中賦予click事件？ 這是我的代碼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代碼在angular中使用相同的jquery功能。

我如何在Angular中做事:-(？？在這里，使用Directives。

代碼如下：

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

為您工作的朋克：

http://plnkr.co/edit/T5dPVVGE0E2LMUMRnDEX?p=預覽

Answer 2

在jQuery示例中，您直接傳遞函數像

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

但是在角度示例中，您將其作為JSON字符串傳遞。 因此它無法解析函數。

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

因此，在您的角度示例中，就像在jquery示例中那樣直接傳遞輸入。 然后您的代碼將起作用。