html - 带有悬停 Angular 的 ngClass

Question

假设我有这个:

 <div 
     class="italic" 
     ng-class="{red: hover}" 
     ng-mouseenter="hover = true"
     ng-mouseleave="hover = false">
         Test 1 2 3.
    </div>
     <div 
     class="italic" 
     ng-class="{red: hover}" 
     ng-mouseenter="hover = true"
     ng-mouseleave="hover = false">
         Test 1 2 3.
    </div>  

我想在用户悬停 div 时用红色类更改颜色。但现在当悬停时，两个 div 都会变红。
[Fiddle] <强> 1 玩代码

Answer 1

你需要使用指令

.directive('hoverClass', function () {
    return {
        restrict: 'A',
        scope: {
            hoverClass: '@'
        },
        link: function (scope, element) {
            element.on('mouseenter', function() {
                element.addClass(scope.hoverClass);
            });
            element.on('mouseleave', function() {
                element.removeClass(scope.hoverClass);
            });
        }
    };
});

并添加这个 html

<div class="italic" hover-class="red" >
     Test 1 2 3.
</div>  

试试这个 http://jsfiddle.net/pthfV/238/