变化对指令鼠标悬停类 [英] Change class on mouseover in directive

问题描述

我无法工作如何获得一个类来改变一个嵌套的指令。

I am having trouble working out how to get a class to change on a nested directive.

这是外NG重复

<div data-courseoverview data-ng-repeat="course in courses | orderBy:sortOrder | filter:search"
         data-ng-controller ="CourseItemController"
         data-ng-class="{ selected: isSelected }">

下面是使用其他指令内NG重复

Below is the inner ng-repeat which is using another directive

                    <li data-ng-repeat="item in social" class="social-{{item.name}}" ng-mouseover="hoverItem(true);"
                ng-mouseout="hoverItem(false);"
                index="{{$index}}"><i class="{{item.icon}}"
                box="course-{{$index}}"></i></li>

下面的指令IM呼吁悬停事件

Here is the directive im calling for the hover event

    ecourseApp.directive("courseoverview", function() { 
  return {    
    restrict : 'A',    
    replace: true, 
    /*scope: {
        index: '@'
    },*/        
    transclude: true,      
    templateUrl: "views/course-overview.html",
    link: function link(scope, element, attrs) {
        scope.switched = false;
        //hover handler
        scope.hoverItem = function(hovered){
            if (hovered) {
                element.addClass('hover');
                $('#course-0 figure').addClass('tint')
            }
            else
                element.removeClass('hover');
        };
    }  
}});

这需要 $（'＃当然-0图'）。addClass（'色彩'）来改变调用的项目。

This needs $('#course-0 figure').addClass('tint') to change the calling item.

感谢

推荐答案

在总的来说，我与Jason的使用CSS选择器的完全同意，但在某些情况下，你可能不希望更改CSS，例如使用第三方的CSS模板，和相当preFER加时/删除元素的类。

In general I fully agree with Jason's use of css selector, but in some cases you may not want to change the css, e.g. when using a 3rd party css-template, and rather prefer to add/remove a class on the element.

下面的示例显示上添加/ NG-的mouseenter /鼠标离开取出一类的简单方法：

The following sample shows a simple way of adding/removing a class on ng-mouseenter/mouseleave:

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

一些造型：

.red {
  background-color: red;
}

.italic {
  font-style: italic;
  color: black;
}

在这里看到运行例如：的jsfiddle样品

在盘旋造型是一个视图的关注。尽管上面的解集在当前范围悬停属性，控制器不需要关心这个。

Styling on hovering is a view concern. Although the solution above sets a "hover" property in the current scope, the controller does not need to be concerned about this.

这篇关于变化对指令鼠标悬停类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！