[英]when using Angular-google-chart directive, how do you access the selected item in the pie chart?
I'm using the angular-google-charts [bouil.github.io/angular-google-chart/] directive to create a pie chart. 我正在使用angular-google-charts [bouil.github.io/angular-google-chart/]指令来创建饼图。
I can fire a method using this with 我可以使用它来触发一个方法
<div google-chart chart="myChart" style="{{cssStyle}}" on-select="seriesSelected()"></div>
$scope.seriesSelected = function () {
console.log('item selected');
}
However, I can't work out how to get the key of the selected item. 但是,我无法弄清楚如何获取所选项目的密钥。 I can see how to do this when using google charts without the angular directive: how to stackoverflow answer .
我可以看到在没有angular指令的情况下使用谷歌图表时如何做到这一点: 如何stackoverflow回答 。 However, I can't follow how to get the element when using angular.
但是,我无法遵循如何在使用角度时获取元素。 This guy seems to have an answer (there is also a plunkr here that fairly accurately shows what I am trying to do), but it seems to be more complex than what I am looking for.
这家伙似乎有一个答案 (这里还有一个相当准确地显示我想要做的事情的傻瓜),但它似乎比我正在寻找的更复杂。
I can see in the ng-google-chart.js directive, there is a line, that adds a property to the selected items: 我可以在ng-google-chart.js指令中看到,有一行,它为所选项添加了一个属性:
var selectEventRetParams = {selectedItems:$scope.chartWrapper.getChart().getSelection()};
but I'm not yet able to see how to access this property. 但我还不知道如何访问这个属性。 Any advice is much appreciated.
任何建议都非常感谢。
Just change the html to the following 只需将html更改为以下内容即可
<div google-chart chart="myChart" style="{{cssStyle}}" agc-on-select="seriesSelected(selectedItem)"></div>
I couldn't access the directive scope either. 我也无法访问指令范围。 So I added a new attribute to the isolated scope and set it "=".
所以我在隔离范围中添加了一个新属性并将其设置为“=”。
The HTML: HTML:
<div google-chart chart="chartObject" style="{{cssStyle}}" custom-select="handleSelect"></div>
Modified directive scope: 修改指令范围:
scope: {
beforeDraw: '&',
chart: '=chart',
onReady: '&',
onSelect: '&',
select: '&',
customSelect: '='
},
Add this to the "select" listener: 将其添加到“select”侦听器:
if($attrs.customSelect){
$scope.customSelect(selectEventRetParams);
}
My event handler: 我的事件处理程序
$scope.handleSelect=function(selection){
console.log(selection);
};
http://jsfiddle.net/s911131/sjh4wfe2/5/ http://jsfiddle.net/s911131/sjh4wfe2/5/
Almost there... referring back to your code: 差不多......回头看你的代码:
$scope.seriesSelected = function () { console.log('item selected'); }
Should be changed to: 应改为:
$scope.seriesSelected = function (selectedItem) { console.log('item selected'); console.log(selectedItem); }
In order to pick up the value as passed by the directive. 为了获取指令传递的值。
UPDATE: 更新:
This was a doozy. 这真是太过分了。 The parameter name 'selectedItem' used in the markup MUST match that being passed back from the directive's isolate scope!!
标记中使用的参数名称'selectedItem'必须匹配从指令的隔离范围传回的参数名称!
on-select="doThis(selectedItem)"
https://docs.angularjs.org/guide/directive does mention it, I didn't read properly. https://docs.angularjs.org/guide/directive确实提到它,我没有正确阅读。
"Often it's desirable to pass data from the isolate scope via an expression to the parent scope, this can be done by passing a map of local variable names and values into the expression wrapper fn. For example, the hideDialog function takes a message to display when the dialog is hidden. This is specified in the directive by calling close({message: 'closing for now'}). Then the local variable message will be available within the on-close expression." “通常需要将数据从隔离范围通过表达式传递到父作用域,这可以通过将局部变量名称和值的映射传递到表达式包装器fn来完成。例如,hideDialog函数会显示一条消息来显示当对话框被隐藏时。这在指令中通过调用close({message:'closing for now'})来指定。然后局部变量消息将在on-close表达式中可用。“
ORIGINAL QUESTION: 原始问题:
@Sam - did you ever get this to work? @Sam - 你有没有得到这个工作? I have set breakpoints both in angular-google-charts and my code and I can see a valid selectedItem variable being constructed and passed into $scope.onSelect({selectedItem: selectedItem}) -
我在angular-google-charts和我的代码中都设置了断点,我可以看到正在构造的有效selectedItem变量并传递到$ scope.onSelect({selectedItem:selectedItem}) -
google.visualization.events.addListener($scope.chartWrapper, 'select', function () {
var selectedItem = $scope.chartWrapper.getChart().getSelection()[0];
$scope.$apply(function () {
if ($attrs.select) {
console.log('Angular-Google-Chart: The \'select\' attribute is deprecated and will be removed in a future release. Please use \'onSelect\'.');
$scope.select({ selectedItem: selectedItem });
}
else{
$scope.onSelect({ selectedItem: selectedItem });
}
});
However by the time this reaches my code, the selItem parameter is undefined. 但是到达我的代码时, selItem参数是未定义的。
my controller code: 我的控制器代码:
$scope.doThis = function(selItem){
alert("a");
};
my markup: 我的加价:
<div google-chart chart="chartObject" on-select="doThis(selItem)" style="{{cssStyle}}" ></div>
I"ve tried both Angular 1.2.x and 1.4.1 - same behavior in both. 我已经尝试过Angular 1.2.x和1.4.1 - 两者都有相同的行为。
@df1 - I can't see how your solution would work since you are calling a function $scope.customSelect(selectEventRetParams), but your directive's isolate scope has declared customSelect to be bound using '=' instead of '&' for expressions/function callbacks. @ df1 - 我无法看到你的解决方案如何工作,因为你正在调用一个函数$ scope.customSelect(selectEventRetParams),但你的指令的隔离范围已声明customSelect要使用'='代替'&'表示/函数回调。
I want to improve my answer and to spend more time looking into others' answers. 我希望改进我的答案并花更多时间研究别人的答案。 I have a working solution, which is as follows.
我有一个有效的解决方案,如下所示。 Modify the directive scope by adding a two way binding called selectedItem:
通过添加名为selectedItem的双向绑定来修改指令范围:
scope: {
beforeDraw: '&',
chart: '=chart',
onReady: '&',
onSelect: '&',
select: '&',
selectedItem: "="
}
Then my function in the directive is as follows: 然后我在指令中的函数如下:
google.visualization.events.addListener($scope.chartWrapper, 'select', function (type) {
var selectEventRetParams = { selectedItems: $scope.chartWrapper.getChart().getSelection() };
selectEventRetParams['selectedItem'] = selectEventRetParams['selectedItems'][0];
$scope.selectedItem = selectEventRetParams['selectedItem'].row;
$scope.select({ selectEventRetParams: selectEventRetParams });
}
Then, I have a watch function in my own code, which happens to also be a directive with it's own controller and this code looks like this: 然后,我在我自己的代码中有一个watch函数,它恰好也是一个带有它自己的控制器的指令,这段代码如下所示:
$scope.$watch('selectedItem', function (newValue) {
if (newValue != null) {
$scope.handleSelectedItem();
}
});
The HTML looks like this: HTML看起来像这样:
<div google-chart chart="chartObject" style="{{cssStyle}}" sselected-item="selectedItem"></div>
I have actually used several two way bindings and use this to click into the pie chart multiple times, diving into the data. 我实际上使用了几个双向绑定,并使用它来多次点击饼图,潜入数据。 It works really well, but I need to tidy my code somewhat and come back to this.
它工作得很好,但我需要稍微整理一下我的代码然后再回过头来。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.