динамическая конфигурация highchart в сетке angular ui с angular js с использованием highcharts pablojim ng

мой код (на контроллере) для создания угловой сетки пользовательского интерфейса -

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? Есть ли другой подход для этого?

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


angularjs highcharts highcharts-ng angular-ui-grid
person user979189    schedule 09.04.2015    source источник

Ответы (2)


arrow_upward
2
arrow_downward

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

Разметка

<highchart id="chart2" config="$parent.getColumnChartConfig(col.colIndex())">
</highchart>
person Pankaj Parkar    schedule 09.04.2015
comment
Спасибо за ваш быстрый ответ. Я пробовал это, и это не работает. Можете ли вы дать образец plunkr или jsfiddle? снова я ценю вашу помощь - person user979189; 09.04.2015
comment
@ user979189 рад помочь вам, спасибо :) - person Pankaj Parkar; 09.04.2015

arrow_upward
1
arrow_downward

Я думаю, вам также следует использовать 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>
person PaulL    schedule 09.04.2015