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

前端之家收集整理的这篇文章主要介绍了angularjs – 在鼠标悬停在指令中更改类前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我无法解决如何让一个类在嵌套指令上改变。

这是外部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”属性,但是控制器不需要关心这一点。

猜你在找的Angularjs相关文章