La griglia ui angolare non mostra il contenuto a meno che la finestra del browser non venga ridimensionata

Question

Sto usando angularjs 1.5.0 con la griglia ui angolare 3.1.1. Quando assegnare gridOptions (passati alla direttiva griglia) oggetto nel corpo regolatore simili:

$scope.gridOptions = { 
     data: [{"mock2": 1, "mock1": 2}, {"mock2": 10, "mock1": 22} ] 
    }; 

HTML:

<div ui-grid="gridOptions"></div> 

Esso mostra la tabella come previsto. Ma quando provo a cambiare i dati all'interno $ scope.on:

$scope.$on('update', function (event, passedFromBroadcast) { 
     $scope.gridOptions.data= [{"mock2": "set", "mock1": "inside"}, {"mock2": "$scope", "mock1": "on"} ] ; 
    }); 

Rende solo struttura del tavolo, quando compresi impaginazione sarà anche rendere i controlli relativi impaginazione - ma non il contenuto stesso. Il contenuto (le intestazioni di righe e colonne) viene visualizzato solo dopo aver ridimensionato la finestra del browser.

1. Perché non angolare-ui aggiornamento griglia contenuti tavolo quando i dati vengono modificati all'interno di $ scope.on?

2. Come aggiornare manualmente la tabella della griglia ui angolare? Le cose che mi già provato:

   $scope.gridApi.core.handleWindowResize(); // Does not work 
   $scope.gridApi.core.refresh(); // Does not work 
   $timeout(function(){$scope.gridOptions.data= [{"mock2": "set", "mock1": "inside"}, {"mock2": "$scope", "mock1": "on"} ] ;}) // Does not work 
   

Answer 1

ci sono due problemi con questo codice, ma il motivo per il contenuto della tabella mostrando solo dopo finestra del browser ridimensionamento è la mancanza di classe CSS larghezza definizione e l'altezza, di base (di lavoro) Esempio:

.grid { 
     width: 500px; 
     height: 250px; 
    } 

e in HTML:

<div class="grid" ui-grid="gridOptions"></div> 

L'altra questione (citato da altre persone in questo discussione:

• campi assegnando gridOption (dati, ma anche columnDefs) deve essere fatto all'interno $ timeout, inoltre sia i dati che devono essere columnDefs c ho imparato prima.In caso contrario, il cambiamento potrebbe non essere visibile e il contenuto della tabella e le intestazioni rimarranno invariati (bug noto in ui-grid come @maurycy menzionato)

Answer 2

Si tratta di un bug noto quando la lunghezza gridOptions.data non cambia dopo l'aggiornamento, la soluzione proposta è quella di cancellare i dati e con l'utilizzo di $ timeout aggiornarlo

$scope.$on('update', function (event, passedFromBroadcast) { 
    $scope.gridOptions.data = null 
    $timeout(function(){ 
    $scope.gridOptions.data = [{"mock2": "set", "mock1": "inside"}, {"mock2": "$scope", "mock1": "on"} ] ; 
    }); 
}); 

Answer 3

si può provare il seguito:

$scope.$on('update', function (event, passedFromBroadcast) { 
    $scope.gridOptions.data.length = 0; 
    $timeout(function(){ 
    $scope.gridOptions.data = [{"mock2": "set", "mock1": "inside"}, {"mock2": "$scope", "mock1": "on"} ] ; 
    }); 
}); 

Spero che questo ha lps!

Answer 4

Mettere il gestore della finestra di ridimensionamento su $interval ha lavorato per me in passato all'interno del metodo gridOptions.onRegisterApi:

var gridResizeHandlerInterval; 

$scope.gridOptions = { 
    ..., // etc. 
    onRegisterApi: function(gridApi) { 
    ctrl.gridApi = gridApi; 

    gridResizeHandlerInterval = $interval(function() { 
     $scope.gridApi.core.handleWindowResize(); 
    }, 10, 500); 
    } 
}; 

E quindi assicuratevi di riordinare e annullare l'intervallo, quando il controller viene distrutta:

$scope.$on('$destroy', function() { 
    $interval.cancel(gridResizeHandlerInterval); 
}); 

Spero che questo ti aiuta ...