Змінити клас при наведенні миші в директиві

У мене проблеми з розробкою, як змусити клас змінитись за вкладеною директивою.

Це зовнішнє ng-повторення

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

Ось директива, яка закликає до події наведення

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')змінити пункт, що викликає.

Загалом, я повністю погоджуюсь із використанням Джейсоном селектора css, але в деяких випадках ви можете не захотіти змінювати css, наприклад, коли використовуєте сторонній шаблон css, а волієте додавати / видаляти клас у елементі.

Наступний зразок демонструє простий спосіб додавання / видалення класу на 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

Стиль наведення при наведенні викликає загрозу. Незважаючи на те, що наведене вище рішення встановлює властивість "наведення" у поточній області застосування, контролеру не потрібно це турбувати.

У минулому я стикався з проблемами з IE та селектором css: hover, тому підхід, який я застосував, полягає у використанні спеціальної директиви.

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

тоді на сам елемент ви можете додати директиву з назвами класів, які потрібно активувати, коли миша знаходиться над елементом, наприклад:

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

Це повинно додати клас наведення та відтінок, коли миша знаходиться над елементом і не ризикує зіткнення імені змінної області дії. Я не тестував, але події 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

Це моє рішення для мого сценарію:

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

стан за замовчуванням:

при наведенні курсору:

Думаю, було б набагато простіше поставити anchorтег i. Ви можете просто скористатися :hoverселектором css . Менше рухомих частин полегшує обслуговування, а менше завантаження 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