在指令中更改鼠标悬停时的类 [英] Change class on mouseover in directive

问题描述

我在弄清楚如何让类更改嵌套指令时遇到问题.

这是外层的 ng-repeat

<div data-courseoverview data-ng-repeat="课程中的课程 | orderBy:sortOrder | filter:search"数据-ng-控制器=课程项目控制器"data-ng-class="{ selected: isSelected }">

下面是使用另一个指令的内部 ng-repeat

<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>

这是我调用悬停事件的指令

ecourseApp.directive("courseoverview", function() {返回 {限制:'A'，替换:真的，/*范围: {指数: '@'},*/转置:真实，templateUrl: "views/course-overview.html",链接:功能链接(范围，元素，属性){scope.switched = false;//悬停处理程序scope.hoverItem = 函数(悬停){如果(悬停){element.addClass('悬停');$('#course-0 figure').addClass('tint')}别的element.removeClass('悬停');};}}});

这需要$('#course-0 figure').addClass('tint') 来改变调用项.

解决方案

总的来说，我完全同意 Jason 对 css 选择器的使用，但在某些情况下，您可能不想更改 css，例如使用第 3 方 css 模板时，更喜欢在元素上添加/删除类.

以下示例展示了一种在 ng-mouseenter/mouseleave 上添加/删除类的简单方法:

测试 1 2 3.

有一些样式:

.red {背景颜色:红色；}.斜体{字体样式:斜体；颜色:黑色;}

在此处查看运行示例:jsfiddle 示例

悬停时的样式是一个视图问题.虽然上面的方案在当前作用域设置了一个hover"属性，但是控制器不需要关心这个.

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

This is the outer ng-repeat

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

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>

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

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

解决方案

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.

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-init="hover = false"
    ng-mouseenter="hover = true"
    ng-mouseleave="hover = false">
      Test 1 2 3.
  </div>
</div>

with some styling:

.red {
  background-color: red;
}

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

See running example here: jsfiddle sample

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屋！