如何从AngularJS指令处理Highcharts事件？ [英] How to handle Highcharts events from an AngularJS directive?

问题描述

使用AngularJS指令，我能够加载Highcharts图。然而，没有被执行我的点击一个点事件处理函数。

http://plnkr.co/edit/pxU0IsBTrvcEwr2Znf5d?p=$p$ PVIEW

JS

  VAR应用= angular.module（图表，[]）;app.directive（'highchart'，函数（）{
    返回{
        限制：'E'，
        模板：'＆LT; D​​IV＆GT;＆LT; / DIV＆GT;，
        更换：真实，        链接：功能（范围，元素，ATTRS）{            。范围$表（函数（）{返回attrs.chart;}，函数（）{              如果回报（attrs.chart！）;              VAR图= JSON.parse（attrs.chart）;              $（元素[0]）highcharts（图表）。            }）;        }
    }
}）;功能Ctrl（$范围）{
    $ scope.example_chart = {
      X轴：{
        类别：['扬'，'月'，'月'，'月'，'五一'，'君'，'月'，'月'，'月'，'月'，'月'，'月' ]
      }，      plotOptions：{
        系列：{
          光标：指示器，
          点：{
              事件：{
                  点击：函数（）{
                      警报（'分类：'+ this.category +'，值：'+ this.y）;
                  }
              }
          }
        }
      }，      系列：[{
        数据：[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

 ＆lt;节NG-应用='排行榜'＆GT;
    ＆LT; D​​IV NG控制器=CTRL＆GT;
       ＆LT; highchart图='{{example_chart}}'＆GT;＆LT; / highchart＆GT;
    ＆LT; / DIV＆GT;
＆LT; /节＆gt;
 

解决方案

看来，如果你直接这样它的东西，使用JSON在属性中解析范围内使用的数据进行工作。也许函数试图以某种方式得到评估？检查属性字符串图表数据后，就可以看到事件：函数包含空白的对象

。

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

Using an AngularJS directive, I am able to load a Highcharts graph. However, my event handler for clicking on a point is not being executed.

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>

解决方案

It seems to be working if you use the data from the scope directly so it's something with JSON parsing from within the attribute. Perhaps the function tries to somehow get evaluated? After examining the attribute string with the chart data, you can see the event: function contains blank objects.

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

这篇关于如何从AngularJS指令处理Highcharts事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！