问题
I'm using the angular-google-charts [bouil.github.io/angular-google-chart/] directive to create a pie 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. 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:
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.
回答1:
Documentation
Just change the html to the following
<div google-chart chart="myChart" style="{{cssStyle}}" agc-on-select="seriesSelected(selectedItem)"></div>
回答2:
I couldn't access the directive scope either. So I added a new attribute to the isolated scope and set it "=".
The 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:
if($attrs.customSelect){
$scope.customSelect(selectEventRetParams);
}
My event handler:
$scope.handleSelect=function(selection){
console.log(selection);
};
http://jsfiddle.net/s911131/sjh4wfe2/5/
回答3:
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.
回答4:
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!!
on-select="doThis(selectedItem)"
https://docs.angularjs.org/guide/directive does mention it, I didn't read properly.
"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."
ORIGINAL QUESTION:
@Sam - did you ever get this to work? 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}) -
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.
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.
@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.
回答5:
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:
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:
$scope.$watch('selectedItem', function (newValue) {
if (newValue != null) {
$scope.handleSelectedItem();
}
});
The HTML looks like this:
<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.
来源：https://stackoverflow.com/questions/27967819/when-using-angular-google-chart-directive-how-do-you-access-the-selected-item-i