我无法解决如何让一个类在嵌套指令上改变。
这是外部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模板，而更喜欢在元素上添加/删除一个类。
原文链接：https://www.f2er.com/angularjs/146972.html以下示例显示了一种在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
