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

Question

我有一个单词列表，每个单词都有一个数字（条纹）。我使用 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-style 调用的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]用于将class应用于span，而不是li，以免与ng-style冲突。

如下使用：

<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');
        })
    }
})