使用 pablojim 的 highcharts ng 在 angular ui 网格中使用 angular js 进行动态高图配置

Question

我的代码（在控制器上）创建一个 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;
}

所以在我的控制器中，我调用了 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

不要使用带有配置属性的插值 {{}} 指令并且你的内部 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>

使用 pablojim 的 highcharts ng 在 angular ui 网格中使用 angular js 进行动态高图配置

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

highcharts

angularjs

highcharts-ng

angular-ui-grid