2015-05-24 10 views
6

Alcuni giorni fa (maggio 2015), Google Chrome ha rilasciato una nuova versione (43.0.2357.65 m).
Con questa nuova versione, una caratteristica ng-grid smesso di funzionare:ngGrid Selezione di righe 2.0.14 non funziona con la nuova versione di Google Chrome e ngAnimate

Sintomo:
Quando scatto una riga, la riga non è evidenziato

Dopo l'esecuzione di alcuni test, sono riuscito a riprodurre il problema da zero:

  1. Creare un'app angolare che richiede ng-grid 2.0.14 e ngAnimate.
  2. Con la vecchia versione di Google Chrome, la riga è evidenziata correttamente.
    Con la nuova versione di Google Chrome, la riga non è evidenziato (anche se è selezionato)

Ho creato due plunkers:

Plunkr 1: App senza ngAnimate
http://plnkr.co/edit/2pSBX9K0QaeaSihMKnGG?p=preview
quando si seleziona una riga, la riga viene evidenziata, indipendentemente Chrome versione

Plunkr 2: App CON ngAnimate
http://plnkr.co/edit/hyRO4fTwglSCL8KCTgHA?p=preview
Quando si seleziona una riga, la riga viene evidenziata nella vecchia versione di Chrome, ma nella nuova versione di Chrome non funziona!

Inoltre, se selezioni Plunkr 2 con Chrome Inspector dopo aver selezionato una riga, puoi vedere che la riga ottiene effettivamente la classe .ngRow.selected (questa classe rende evidenziata la riga, cambiando il suo colore di sfondo) ma è Chrome quello che non rappresenta visivamente questo cambiamento (questa acquisizione di classe)

Come posso risolvere questo? qualche indizio?



Edit:
ho creato una terza plunkr:
http://plnkr.co/edit/cWMlKEz39n8K52VWH9q8?p=preview

Questo è un fork del secondo plunkr, in cui ho animazioni disabili per ogni oggetto che non ha la classe "angular-animate" in esso, vale a dire:

Questo funziona (ora le righe sono evidenziate dopo la selezione) ma se si utilizzano le animazioni nella propria app, questo per lo più si interromperà ogni altra animazione! come i modal di bootstrap-ui, per esempio. Quindi, questa non è una soluzione, ma un'idea: ho bisogno di disabilitare le animazioni solo per ng-grid. Come ottengo ciò?

classNameFilter(x) abilita le animazioni solo per gli articoli con la classe x in esse. Esiste una funzione simile per disabilitare le animazioni per determinati elementi?

+0

Alla fine, la mia applicazione angolare utilizza 'angular-animate' per due motivi:' bootstrap ui modals' e la libreria 'anglepaner toaster'. Così ho aggiunto 'classNameFilter (/ modal | toast /)', che abilita le animazioni per quegli oggetti abbinati e disabilita le animazioni per tutto il resto (es .: righe ng-grids) – sports

+0

Ho postato una potenziale soluzione al problema di GitHub: https: //github.com/angular-ui/ng-grid/issues/3574 - prova a ricostruire le colonne. Ho avuto successo con questo su Chrome Version 43.0.2357.124 m –

risposta

1

Prova questo:

afterSelectionChange: function(rowItem, event) { 
     var x = document.querySelectorAll(".ng-scope .ngRow"); 
     x[rowItem.rowIndex].style["webkitUserSelect"] = "none"; 
     $timeout(function() { 
      x[rowItem.rowIndex].style["webkitUserSelect"] = "text"; 
     }, 100); 
} 

Questa correzione funziona in diversi progetti. Ricordati di $ timeout però.

+0

Questa è una soluzione orribile. Immagina di incollare quel blocco di codice in ogni definizione di griglia. Invece di quel blocco, puoi provare 'scope.gridOptions.ngGrid.buildColumns();' o '$ (window) .resize()', all'interno di 'afterSelectionChange' – sports

0

Per aggirare il problema ho creato un semplice plugin che è possibile registrare all'interno delle impostazioni del ng-grid oggetto:

//controller 
$scope.gridOptions = { data : "myData", 
    plugins: [ new ngGridFixChromeSelectionBugPlugin() ] 
}; 

//plugin 
function ngGridFixChromeSelectionBugPlugin() { 
     var self = this; 
     self.init = function (scope, grid, services) { 
      self.services = services; 
      self.grid = grid; 
      //check if the browser is Chrome (for performance issues) 
      if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { 
      // mousedown event on row selection 
      grid.$viewport.on('mousedown', self.onRowMouseDown); 
     } 
     }; 
     self.onRowMouseDown = function (event) { 
      // Get the closest row element from where we click. 
      var targetRow = $(event.target).closest('.ngRow');   
      if (targetRow) { 
       self.grid.buildColumns(); 
      } 
     }; 
    } 

questa correzione ha funzionato per me!