1

我的代码（在控制器上）创建一个角度 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()来填充网格的函数gridOptionscolumnDefs

正如您在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？有没有其他方法可以做到这一点？

提前致谢。

4

2 回答 2

2

不要使用{{}}带有配置属性的插值指令并且您的内部 div 函数应该专门指向您使用的父级ng-if，因为它会从当前运行范围创建新的子范围。$parent所以你需要使用关键字显式指向父范围

标记

<highchart id="chart2" config="$parent.getColumnChartConfig(col.colIndex())">
</highchart>
于 2015-04-09T17:04:48.247 回答
1

我认为您也应该使用 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>
于 2015-04-09T21:10:30.887 回答