angularjs 使用Angular-google-chart指令时,如何访问饼图中的选定项?

mm9b1k5b  于 2022-11-21  发布在  Angular
关注(0)|答案(5)|浏览(141)

我使用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()};

但我还不知道如何进入这个地方。任何建议都非常感谢。

yb3bgrhw

yb3bgrhw1#

Documentation
只需将html更改为以下内容:

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

mrfwxfqh2#

我也不能访问指令作用域,所以我在隔离作用域中添加了一个新属性,并将其设置为“="。
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/

a1o7rhls

a1o7rhls3#

快到了......回到你的代码:

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

应改为:

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

以便拾取指令传递的值。

o75abkj4

o75abkj44#

更新日期:

这是一个小问题。标记中使用的参数名'selectedItem'必须与从指令的隔离作用域传递回来的参数名匹配!!

on-select="doThis(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:所选项目})**-

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 });
                                            }
                                    });

但是,当它到达我的代码时,selItem参数尚未定义。
我的控制器代码:

$scope.doThis = function(selItem){
        alert("a");
    };

我标记:

<div google-chart chart="chartObject" on-select="doThis(selItem)" style="{{cssStyle}}" ></div>

我已经尝试了Angular 1.2.x与1.4.1 -两者得行为相同.

@df1-我看不出您的解决方案会如何工作,因为您正在调用函数$scope.customSelect(selectEventRetParams),但您的指令的隔离作用域已声明customSelect将使用'='而不是'&'来绑定表达式/函数回调。

vx6bjr1n

vx6bjr1n5#

我想改进我的答案,并花更多的时间研究别人的答案。我有一个可行的解决方案,如下所示。通过添加一个名为selectedItem的双向绑定来修改指令的作用域:

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

那么我在指令中的函数如下:

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 });
}

然后,我在自己的代码中有一个watch函数,它碰巧也是一个带有自己控制器的指令,代码如下所示:

$scope.$watch('selectedItem', function (newValue) {
            if (newValue != null) {
                $scope.handleSelectedItem();
            }
        });

HTML如下所示:

<div google-chart chart="chartObject" style="{{cssStyle}}" sselected-item="selectedItem"></div>

我实际上已经使用了几个双向绑定,并使用它多次点击饼图,深入到数据中。它工作得很好,但我需要整理一下我的代码,然后再回来。

相关问题