使用Angular-google-chart指令時，如何訪問餅圖中的選定項？

Question

我正在使用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');
    }

但是，我無法弄清楚如何獲取所選項目的密鑰。 我可以看到在沒有angular指令的情況下使用谷歌圖表時如何做到這一點： 如何stackoverflow回答 。 但是，我無法遵循如何在使用角度時獲取元素。 這家伙似乎有一個答案 （這里還有一個相當准確地顯示我想要做的事情的傻瓜），但它似乎比我正在尋找的更復雜。

我可以在ng-google-chart.js指令中看到，有一行，它為所選項添加了一個屬性：

var selectEventRetParams = {selectedItems:$scope.chartWrapper.getChart().getSelection()};

但我還不知道如何訪問這個屬性。 任何建議都非常感謝。

Answer 1

文檔

只需將html更改為以下內容即可

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

Answer 2

我也無法訪問指令范圍。 所以我在隔離范圍中添加了一個新屬性並將其設置為“=”。

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/

Answer 3

差不多......回頭看你的代碼：

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

應改為：

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

為了獲取指令傳遞的值。

Answer 4

更新：

這真是太過分了。 標記中使用的參數名稱'selectedItem'必須匹配從指令的隔離范圍傳回的參數名稱！

on-select="doThis(selectedItem)"

https://docs.angularjs.org/guide/directive確實提到它，我沒有正確閱讀。

“通常需要將數據從隔離范圍通過表達式傳遞到父作用域，這可以通過將局部變量名稱和值的映射傳遞到表達式包裝器fn來完成。例如，hideDialog函數會顯示一條消息來顯示當對話框被隱藏時。這在指令中通過調用close（{message：'closing for now'}）來指定。然后局部變量消息將在on-close表達式中可用。“

原始問題：

@Sam - 你有沒有得到這個工作？ 我在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 });
                                            }
                                    });

但是到達我的代碼時， 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要使用'='代替'＆'表示/函數回調。

Answer 5

我希望改進我的答案並花更多時間研究別人的答案。 我有一個有效的解決方案，如下所示。 通過添加名為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>

我實際上使用了幾個雙向綁定，並使用它來多次點擊餅圖，潛入數據。 它工作得很好，但我需要稍微整理一下我的代碼然后再回過頭來。