angularjs - cli - ng-if

configuración dinámica del cuadro de alta resolución en la cuadrícula de ui angular con js angulares usando los cuadros superiores de pablojim ng

Question

mi código (en el controlador) para crear una ui-grid angular -

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

Entonces en mi controlador llamo a la función getData() que completará la cuadrícula con gridOptions y creará la matriz de columnDefs

Como ves en la columnDefs estoy usando cellTemplate en la grilla Y así es como se ve mi 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>

Entonces, mi cuadrícula muestra columnas de datos y una de las columnas tiene un gráfico, que necesita leer la configuración de forma dinámica desde el objeto $scope del controlador. Este objeto de configuración del gráfico dinámico debe ser proporcionado por el método getColumnChartConfig en el alcance del controlador que se ve más o menos así en su forma más simple:

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

¿Puede decirme si esta es la forma correcta de lograr lo que intento y, si es así, por qué no se llama al método getColumnChartConfig desde cellTemplate de mi cuadrícula? ¿Hay algún otro enfoque para hacer esto?

Gracias por adelantado.

Answer 1

Creo que también debería usar appScope, consulte http://ui-grid.info/docs/#/tutorial/305_appScope .

Eso haría que tu plantilla sea más parecida:

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

Answer 2

No utilice la directiva de interpolación {{}} con el atributo de configuración Y su función div interna debe apuntar específicamente al padre como lo utilizó ng-if , ya que crea un nuevo ámbito hijo del ámbito de ejecución actual. por lo que debe apuntar explícitamente al ámbito primario utilizando $parent palabra clave $parent

Margen

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