12

我有一个单词列表，每个单词都有一个数字（条纹）。我使用 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 更好的方法来设置背景，使其与分配给每个单词的数字相对应？或者有没有办法在用户将鼠标悬停在一个词上时突出显示？

4

3 回答 3

15

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

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

更新了 JS Fiddle 演示。

使用!important关键字本质上会导致应用规则而不管选择器的特殊性（当然，假设更具体的选择器也没有关键字）!important。但是，如果您或您的同事忘记使用!important.

参考：

于 2012-12-31T20:44:56.523 回答
10

如果不想使用!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>

小提琴

于 2012-12-31T21:55:37.083 回答
4

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

App.directive('attr', function(){
    return function(scope, element) {
        element.bind('mouseenter', function(){
            element.addClass('hover');
        }).bind('mouseleave', function(){
          element.removeClass('hover');
        })
    }
})
于 2013-04-22T01:36:43.183 回答