使用pablojim的highcharts ng，角度js在角度ui网格中的动态高图配置 [英] dynamic highchart config in angular ui grid with angular js using pablojim's highcharts ng

问题描述

我的代码（在控制器上）创建一个角度ui网格 -

 函数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 ='无法加载客户数据：'+ error.message; 
}）; 
 
 
函数getColumnDefs（列）{
 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
}）; 
} 
 
返回columnDefs; 
 
 
 
 $ b 
所以在我的控制器中，我调用了 getData（） 函数将使用 gridOptions 填充网格，并创建 columnDefs  array 
 
 
 
正如你在 columnDefs 中看到的那样，我在网格中使用 cellTemplate  
这就是我的 ui-grid-cell-template.html 的样子 -  
 < div ng-if =isChartColumn（col）> //这可以工作
< div class =ngCellText column-chart-style> 
< highchart id =chart2
 config ={{getColumnChartConfig（col.colIndex（））}}>< / highchart> //这不起作用
< / div> 
< / div> 
  
所以我的网格显示数据列，其中一列有图表，需要读取配置动态地从控制器的 $ scope 对象。这个动态图表配置对象由控制器范围中的 getColumnChartConfig 方法提供，它的最简单形式如下所示 -  
  //这个函数没有被调用
 $ scope.getColumnChartConfig = function（rowId）{
 return someChartConfigObject; 
} 
  
你能否让我知道这是否是完成我的正确方法我试图如果是，那么为什么 getColumnChartConfig 方法没有从我的网格的 cellTemplate 中调用？有没有其他方法可以做到这一点？
 
 
 
预先致谢。
解决方案
不要在config属性中使用插值 {{}} 伪指令。当您使用 ng时，内部div函数应特别指向父项-if ，因为它从当前运行范围创建新的子范围。因此您需要使用 $ parent 关键字 
 
 
 标记 <
 < highchart id =chart2config =$ parent.getColumnChartConfig（col.colIndex（））> 
< / highchart> 
  
 
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.
解决方案
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>


                        
这篇关于使用pablojim的highcharts ng，角度js在角度ui网格中的动态高图配置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！