Angular UI-Grid: Hover auf erweiterbare Zeile

Question

Ich versuche, einen Hover-Effekt auf die Zeilen eines Angular-Ui-Gitters zu implementieren. Wenn der Benutzer irgendwo in der Zeile schwebt, sollte die komplette Zeile die Hintergrundfarbe ändern. Ich verwende jedoch das erweiterbare Raster, das automatisch einen Zeilenkopf mit dem Erweiterungssymbol erstellt. Jetzt färben die CSS-Regeln entweder den Zeilenkopfbereich oder den Datenbereich, aber niemals die komplette Zeile.

Dies ist der Hover-Effekt auf den Zeilenkopf:

Dies ist der Hover-Effekt auf einer anderen Spalte:

Hat jemand eine Lösung dafür finden?

Answer 1

Hier ist, was ich getan habe:

Im rechten Teil der Tabelle, ich folgendes an die Zell Vorlage hinzugefügt:

<div class="ui-grid-cell-contents" 
    ng-class="{ 'ui-grid-cell-hover': (grid.appScope.hoverRow == row.uid) }" 
    ng-mouseenter="grid.appScope.hoverRow = row.uid" 
    ng-mouseleave="grid.appScope.hoverRow = undefined"> 

den linken Teil abzudecken, änderte es die expandableRowHeader Vorlage (im Vorlagen-Cache, da es nicht extern belichtet wird):

Ich mag diese Lösung nicht. Erstens mag ich es nicht, eine Komponente von Drittanbietern zu patchen. Zweitens reagiert der Schwebeflug langsam: Es dauert eine halbe Sekunde bis zwischen Schweben und Farbwechsel.

Also, falls jemand eine bessere Lösung hat, bitte posten Sie es hier.