angularjs – 在鼠标悬停在指令中更改类

发布时间：2020-12-17 09:10:15 所属栏目：安全来源：网络整理

导读：我无法解决如何让一个类在嵌套指令上改变。这是外部ng重复 div data-courSEOverview data-ng-repeat="course in courses | orderBy:sortOrder | filter:search" data-ng-controller ="CourseItemController" data-ng-class="{ selected: isSelected }" 下面

我无法解决如何让一个类在嵌套指令上改变。

这是外部ng重复

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

下面是使用另一个指令的内部ng重复

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

这里是调用hover事件的指令

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

这需要$(‘#course-0 figure’)。addClass(‘tint’)来改变调用项。

谢谢

一般来说，我完全同意Jason的CSS选择器的使用，但在某些情况下，你可能不想改变CSS，例如。当使用第三方CSS模板，而更喜欢在元素上添加/删除一个类。

以下示例显示了一种在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 sample

悬停时的样式是一个看法关注。虽然上面的解决方案在当前范围中设置了“hover”属性，但是控制器不需要关心这一点。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!