在指令中更改鼠标hover的类

我有麻烦的工作如何获得一个类更改嵌套指令。

这是外部重复

<div data-courseoverview data-ng-repeat="course in courses | orderBy:sortOrder | filter:search" data-ng-controller ="CourseItemController" 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> 

这是im调用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')来改变调用项目。

谢谢

Answer 1

一般来说，我完全同意Jason对cssselect器的使用，但在某些情况下，您可能不想更改css，例如使用第三方css-template时，宁愿添加/删除元素上的类。

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

有一些造型：

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

看这里运行示例： jsfiddle示例

hover式造型是一个值得关注的问题。 尽pipe上面的解决scheme在当前范围中设置了“hover”属性，但是控制器不需要关心这一点。

Answer 2

IE浏览器和css：hoverselect器，我遇到了问题，所以我采取的做法是使用自定义指令。

 .directive('hoverClass', function () { return { restrict: 'A', scope: { hoverClass: '@' }, link: function (scope, element) { element.on('mouseenter', function() { element.addClass(scope.hoverClass); }); element.on('mouseleave', function() { element.removeClass(scope.hoverClass); }); } }; }) 

那么在元素本身上，您可以添加指令，并在鼠标hover在元素上时使用要启用的类名称：

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

这应该在鼠标hover在元素上时添加类的hover和色调，并且不会产生作用域variables名冲突的风险。 我还没有testing过，但是mouseenter和mouseleave事件仍然应该会触发包含元素，所以在给定的情况下，下面的代码仍然可以工作

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

当然提供李氏是父母div的事实儿童

Answer 3

这是我的解决scheme：

 <div class="btn-group btn-group-justified"> <a class="btn btn-default" ng-class="{'btn-success': hover.left, 'btn-danger': hover.right}" ng-click="setMatch(-1)" role="button" ng-mouseenter="hover.left = true;" ng-mouseleave="hover.left = false;"> <i class="fa fa-thumbs-o-up fa-5x pull-left" ng-class="{'fa-rotate-90': !hover.left && !hover.right, 'fa-flip-vertical': hover.right}"></i> {{ song.name }} </a> <a class="btn btn-default" ng-class="{'btn-success': hover.right, 'btn-danger': hover.left}" ng-click="setMatch(1)" role="button" ng-mouseenter="hover.right = true;" ng-mouseleave="hover.right = false;"> <i class="fa fa-thumbs-o-up fa-5x pull-right" ng-class="{'fa-rotate-270': !hover.left && !hover.right, 'fa-flip-vertical': hover.left}"></i> {{ match.name }} </a> </div> 

默认状态：

hover：

Answer 4

我认为在i身边放一个anchor标签会容易得多。 你可以使用css :hoverselect器。 更less的移动部件使维护更容易，更less的JavaScript负载使页面更快。

这将做的伎俩：

 <style> a.icon-link:hover { background-color: pink; } </style> <a href="#" class="icon-link" id="course-0"><i class="icon-thumbsup"></id></a> 

jsfiddle的例子