dynamic highchart config in angular ui grid with angular js using pablojim's highcharts ng

问题

my code (on the controller) to create an angular ui-grid -

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

So in my controller i call the getData() function which will populate the grid with the gridOptions and create columnDefs array

As you see in the columnDefs i am using cellTemplate in the grid And this is how my ui-grid-cell-template.html looks like -

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

So my grid shows data columns and one of the column has a chart, which needs to read the config dynamically from controller's $scope object. This dynamic chart config object is to be supplied by getColumnChartConfig method on controller's scope which looks something like this in its simplest form -

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

Can you please let me know whether this is the correct way to accomplish what i am trying to and if it is then why is the getColumnChartConfig method not getting called from my grid's cellTemplate? Is there any other approach to do this?

Thanks in advance.

回答1:

Don't use interpolation {{}} directive with config attribute And You inner div function should specifically point to the parent as you used ng-if, as it creates new child scope from current running scope. so you need to explicitly point to parent scope using $parent keyword

Markup

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

回答2:

I think you should be using appScope as well - refer http://ui-grid.info/docs/#/tutorial/305_appScope.

That would make your template more like:

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

来源：https://stackoverflow.com/questions/29544532/dynamic-highchart-config-in-angular-ui-grid-with-angular-js-using-pablojims-hig