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. I can fire a method using this with

Solution 2:

I couldn't access the directive scope either. So I added a new attribute to the isolated scope and set it "=".

The HTML:

<divgoogle-chartchart="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/

Solution 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.

Solution 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.

Solution 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:

<divgoogle-chartchart="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.

Share