我使用angular-google-charts [bouil.github.io/angular-google-chart/]指令创建一个饼图。
我可以使用这个方法来引发
<div google-chart chart="myChart" style="{{cssStyle}}" on-select="seriesSelected()"></div>
$scope.seriesSelected = function () {
console.log('item selected');
}
但是,我无法找到如何获得所选项目的键。我可以看到如何在使用google charts时不使用Angular 指令:how to stackoverflow answer。但是,我不知道如何在使用angular时获得元素。这个家伙似乎有一个answer(这里也有一个plunkr,它相当准确地显示了我正在尝试做什么),但它似乎比我正在寻找的更复杂。
我可以看到ng-google-chart.js指令中有一行,它向选定项添加了一个属性:
var selectEventRetParams = {selectedItems:$scope.chartWrapper.getChart().getSelection()};
但我还不知道如何进入这个地方。任何建议都非常感谢。
5条答案
按热度按时间yb3bgrhw1#
Documentation
只需将html更改为以下内容:
mrfwxfqh2#
我也不能访问指令作用域,所以我在隔离作用域中添加了一个新属性,并将其设置为“="。
HTML:
修改的指令范围:
将以下内容添加到“select”侦听器:
我的事件行程常式:
http://jsfiddle.net/s911131/sjh4wfe2/5/
a1o7rhls3#
快到了......回到你的代码:
应改为:
以便拾取指令传递的值。
o75abkj44#
更新日期:
这是一个小问题。标记中使用的参数名'selectedItem'必须与从指令的隔离作用域传递回来的参数名匹配!!
https://docs.angularjs.org/guide/directive确实提到了它,我没有正确阅读。
“通常需要通过表达式将数据从隔离作用域传递到父作用域,这可以通过将局部变量名称和值的Map传递到表达式 Package 器fn来完成。例如,hideDialog函数在对话框隐藏时获取要显示的消息。这在指令中通过调用close({message:'closing for now'})。则局部变量message将在on-close表达式中可用。”
原始问题:
@Sam-你有没有试过这样做?我在angular-google-charts和我的代码中都设置了断点,我可以看到一个有效的selectedItem变量被构造并传递到**$scope中。onSelect({selectedItem:所选项目})**-
但是,当它到达我的代码时,selItem参数尚未定义。
我的控制器代码:
我标记:
我已经尝试了Angular 1.2.x与1.4.1 -两者得行为相同.
@df1-我看不出您的解决方案会如何工作,因为您正在调用函数$scope.customSelect(selectEventRetParams),但您的指令的隔离作用域已声明customSelect将使用'='而不是'&'来绑定表达式/函数回调。
vx6bjr1n5#
我想改进我的答案,并花更多的时间研究别人的答案。我有一个可行的解决方案,如下所示。通过添加一个名为selectedItem的双向绑定来修改指令的作用域:
那么我在指令中的函数如下:
然后,我在自己的代码中有一个watch函数,它碰巧也是一个带有自己控制器的指令,代码如下所示:
HTML如下所示:
我实际上已经使用了几个双向绑定,并使用它多次点击饼图,深入到数据中。它工作得很好,但我需要整理一下我的代码,然后再回来。