使用ng-style设置样式后，在悬停时更改背景颜色

Question

我有一个单词列表，每个单词都有一个编号(streak)。我使用AngularJS的ng样式根据分配给它的数字设置每个单词的背景颜色。

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>

从ng样式调用的javascript。

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

这是可行的，但是，我希望当鼠标悬停在一个单词上时，背景会突出显示。我添加了一个类"tHi“，它通常会改变悬停时的背景，但它被添加的样式覆盖了。

这是一个演示此问题的jsfiddle。

有没有比ng-style更好的方法来设置背景，使其与分配给每个单词的数字相对应？或者，当用户将鼠标悬停在某个单词上时，有什么方法可以突出显示吗？

Answer 1

这是我真正建议在CSS中使用!important的极少数情况之一：

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

Updated JS Fiddle demo。

使用!important关键字本质上会导致应用规则，而不考虑选择器的特殊性(当然，假设更具体的选择器没有!important关键字)。但是，如果您或您的同事忘记了!important的使用，那么它确实有可能使调试变得非常困难。

参考文献：

• !important.

Answer 2

如果不想使用!important，可以使用ng-mouseover动态添加类

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

然后添加到您的控制器：

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

在控制器中操作DOM不是“最佳实践”。一个指令会更好。

更新：这里有一个指令

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

children()[0]用于将类应用于跨度，而不是li，以避免与ng样式冲突。

使用方法如下：

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

Fiddle

Answer 3

我发现通过指令是最简单的方法。

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