динамический highchart конфигурации в угловой Ui сетке с угловой JS с помощью Highcharts pablojim в нг

Question

моего кода (на контроллере), чтобы создать угловую UI-сетку -

function getData() { 
    $scope.myData = []; 
    $scope.columnDefs = []; 
    $scope.gridOptions = { 
     data: 'myData', 
     useExternalSorting: true, 
     columnDefs: 'columnDefs', 
    }; 
    valuesService.getValues().success(function (data) { 
     $scope.columnDefs = getColumnDefs(data.DataColumns); 
     $scope.myData = data.Data; 
     if (!$scope.$$phase) $scope.$apply(); 
    }).error(function (error) { 
     $scope.status = 'Unable to load customer data: ' + error.message; 
    }); 
} 

function getColumnDefs(columns) { 
    var columnDefs = new Array(); 
    for (var i = 0; i < columns.length; i++) { 
     columnDefs.push({ 
      field: columns[i].Name, 
      displayName: columns[i].Caption, 
      width: columns[i].Width, 
      hasChart: columns[i].HasChart, 
      cellTemplate: "ui-grid-cell-template.html" 
     }); 
    } 

    return columnDefs; 
} 

Так что в моем контроллере я вызвать функцию, которая будет getData() заполнения сетки с gridOptions и создать columnDefs массив

как вы видите, в columnDefs я использую cellTemplate в сетке и это, как мой ui-grid-cell-template.html выглядит -

<div ng-if="isChartColumn(col)"> //This works 
    <div class="ngCellText column-chart-style"> 
     <highchart id="chart2" 
     config="{{getColumnChartConfig(col.colIndex())}}"></highchart> //this does not work 
    </div> 
</div> 

Таким образом, моя сетка показывает столбцы данных, а один из столбцов имеет диаграмму, которая должна динамически считывать конфигурацию из объекта $scope контроллера. Этот динамический объект диаграммы конфигурации должен поставляться getColumnChartConfig способом на объем контроллера, который выглядит примерно так в своей простейшей форме -

//This function is not getting called 
$scope.getColumnChartConfig = function (rowId) { 
     return someChartConfigObject; 
} 

Можете ли вы дайте мне знать, является ли это правильный способ сделать то, что я пытаюсь и, если это так, то почему метод getColumnChartConfig не получает вызов из моей сетки cellTemplate? Есть ли другой подход к этому?

Заранее спасибо.

Answer 1

Не использовать интерполяцию {{}} директива с атрибутом config И ваша внутренняя функция div должна конкретно указывать на родительский объект, как вы использовали ng-if, так как он создает новую область дочерних объектов из текущей области выполнения. так что вам нужно явно указывать на родительской области с использованием ключевого слова $parent

Разметка

<highchart id="chart2" config="$parent.getColumnChartConfig(col.colIndex())"> 
</highchart> 

Answer 2

Я думаю, вы должны использовать appScope, а также - см http://ui-grid.info/docs/#/tutorial/305_appScope.

Это сделает ваш шаблон больше похож:

<div ng-if="grid.appScope.isChartColumn(col)"> 
    <div class="ngCellText column-chart-style"> 
    <highchart id="chart2" config="grid.appScope.getColumnChartConfig(col.colIndex())}}">  
    </highchart> 
    </div> 
</div>