Zmiana koloru tła po najechaniu kursorem po ustawieniu stylu z użyciem stylu ng

Question

Mam listę słów z liczbą (smugą) przypisaną do każdego słowa. Ustawiam kolor tła każdego słowa na podstawie numeru przypisanego do niego przy użyciu ng-stylu AngularJS.

html

<ul class="unstyled"> 
    <li class="tHi" ng-repeat="item in items" ng-click="getEdit(item.word)" ng-style="bgstyle(item.streak)"> 
     <span>{{item.word}} {{item.streak}}</span> 
    </li> 
    </ul> 

javascript, która jest wywoływana z NG-stylu.

$scope.bgstyle = function (streak) { 
    var red = 255; 
    var green = 255-streak; 
    var blue = 255-streak; 
    var rgb = blue | (green << 8) | (red << 16); 
    var sColor = '#' + rgb.toString(16); 
    return {backgroundColor: sColor}; 
} 

Działa to jednak, chciałbym podświetlić tło, gdy mysz unosi się nad słowem. Dodałem klasę "tHi", która normalnie zmieniałaby tło po najechaniu kursorem, ale została nadpisana przez dodany styl.

Oto jsfiddle, który demonstruje ten problem.

Czy istnieje lepszy sposób ustawiania tła niż styl ng, aby odpowiadał numerowi przypisanemu do każdego słowa? A może jest jakiś sposób podkreślenia, gdy użytkownik unosi się nad słowem?

Answer 1

Jest to jeden z nielicznych przypadków, gdzie ja właściwie zalecamy użycie !important w CSS:

.tHi:hover { 
    cursor: pointer; 
    background-color: #9f9 !important; 
} 

Updated JS Fiddle demo.

Używanie słowa kluczowego !important istocie powoduje, że reguła będzie stosowana niezależnie od specyfiki selektora (zakładając, że bardziej specyficzne selektor nie również mają słowa kluczowego !important, oczywiście). To ma, jednak mają potencjał, aby zrobić debugowanie dość trudne, jeśli ty lub twoi współpracownicy, zapomnij o użyciu !important.

Odniesienia:

• !important.

Answer 2

Jeśli nie chcesz używać !important można dodać klasę dynamicznie przy użyciu ng-mouseover:

<li ng-repeat="item in items" ng-click="getEdit(item.word)" 
    ng-style="bgstyle(item.streak)" ng-mouseover="hover($event)"> 

następnie dodać do kontrolera:

$scope.hover = function(e) { 
    angular.element(e.srcElement).addClass('tHi') 
} 

Manipulowanie DOM w sposób kontroler nie jest "najlepszą praktyką". Dyrektywa byłaby lepsza.

Aktualizacja: Oto dyrektywa

myApp.directive('ngHover', function() { 
    return { 
    link: function(scope, element) { 
     element.bind('mouseenter', function() { 
      angular.element(element.children()[0]).addClass('tHi') 
     }) 
    } 
    } 
}); 

children()[0] służy zastosować klasę do rozpiętości, a nie li, tak aby nie kolidować z NG-stylu.

Zastosowanie następująco:

<li ng-repeat="item in items" ng-click="getEdit(item.word)" 
    ng-style="bgstyle(item.streak)" ng-hover> 

Fiddle

Answer 3

znalazłem przez dyrektywy był najłatwiejszy sposób.

App.directive('attr', function(){ 
    return function(scope, element) { 
     element.bind('mouseenter', function(){ 
      element.addClass('hover'); 
     }).bind('mouseleave', function(){ 
      element.removeClass('hover'); 
     }) 
    } 
})