在使用Angular-google-chart指令时，如何访问饼图中的选定项？

Question

我正在使用angular-google- angular-google-charts / directive创建一个饼图。

我可以用下面的命令触发一个方法

<div google-chart chart="myChart" style="{{cssStyle}}" on-select="seriesSelected()"></div>

  $scope.seriesSelected = function () {
        console.log('item selected');
    }

但是，我不知道如何获取所选项目的密钥。在不使用angular指令的情况下，我可以看到如何使用google charts：how to stackoverflow answer。然而，我不能理解在使用angular时如何获取元素。这家伙似乎有一个answer (这里也有一个能相当准确地显示我正在尝试做的事情的图)，但它似乎比我想要的要复杂得多。

我可以在ng-google-chart.js指令中看到，有一行向所选项目添加了一个属性：

var selectEventRetParams = {selectedItems:$scope.chartWrapper.getChart().getSelection()};

但是我还不能看到如何访问这个属性。任何建议都是非常感谢的。

Answer 1

Documentation

只需将html更改为以下内容

<div google-chart chart="myChart" style="{{cssStyle}}" agc-on-select="seriesSelected(selectedItem)"></div>

Answer 2

我也无法访问指令作用域。因此，我在隔离作用域中添加了一个新属性，并将其设置为"=“。

HTML：

 <div google-chart chart="chartObject" style="{{cssStyle}}" custom-select="handleSelect"></div>

修改的指令作用域：

           scope: {
                beforeDraw: '&',
                chart: '=chart',
                onReady: '&',
                onSelect: '&',
                select: '&',
                customSelect: '='
            },

将此代码添加到"select“监听器中：

if($attrs.customSelect){
    $scope.customSelect(selectEventRetParams);
}

我的事件处理程序：

$scope.handleSelect=function(selection){
    console.log(selection);
};

http://jsfiddle.net/s911131/sjh4wfe2/5/

Answer 3

就快到了..。回顾一下你的代码：

​

$scope.seriesSelected = function () {
  console.log('item selected');
}

​

应更改为：

​

$scope.seriesSelected = function (selectedItem) {
  console.log('item selected');
  console.log(selectedItem);
}

​

以便拾取指令传递的值。