Change class on mouseover in directive

Question

I'm having trouble developing how to make a class change a nested directive.

This is an external 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 an internal ng-repeat that uses a different 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 I am 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 requires $('#course-0 figure').addClass('tint') to change the caller.

Answer 1

In general, I completely agree with Jason using the css selector, but in some cases you may not want to change the css, for example, when using a third-party css template, and rather prefer to add / remove a class in the element.

The following example shows an easy way to add / remove a class in 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 styles:

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

See a running example here: jsfiddle example

Hanging styling is a serious problem. Although the solution above sets the hover property in the current scope, the controller should not worry about that.

Answer 2

In the past, I ran into problems with IE and the css: hover selector, so the approach I took is to use a special directive.

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

then in the element itself you can add a directive with the names of the classes that you want to include when the mouse is over the element, for example:

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

This should add guidance and hue to the class when the mouse is over the element, and does not pose a risk of collision of the name of the variable scope. I have not tested, but the mouseenter and mouseleave events should still appear before the containing element, so this script should still work in this scenario

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

ensuring, of course, that li are children of the parent div

Answer 3

This is my solution for my scenario:

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

The default state is:

on hover:

Answer 4

I think it would be much easier to place the anchor tag around i . You can simply use the css :hover selector. Fewer moving parts make maintenance easier and fewer javascript downloads make the page faster.

This will do the trick:

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

jsfiddle example