angularjs - page - Cambiar clase en mouseover en directiva

page title angular 4

Question

Tengo problemas para encontrar la forma de cambiar una clase en una directiva anidada.

Esta es la repetición ng externa

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

Debajo está la repetición interna ng que está usando otra directiva

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

Aquí está la directiva que estoy pidiendo para el evento 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'');
        };
    }  
}});

Esto necesita $(''#course-0 figure'').addClass(''tint'') para cambiar el elemento que realiza la llamada.

Gracias

Answer 1

Creo que sería mucho más fácil poner una etiqueta de anchor alrededor. Puedes usar el selector css :hover . Las partes menos móviles hacen que el mantenimiento sea más fácil, y menos javascript para cargar hace que la página sea más rápida.

Esto hará el truco:

<style>
 a.icon-link:hover {
   background-color: pink;
 }
</style>

<a href="#" class="icon-link" id="course-0"><i class="icon-thumbsup"></id></a>

Ejemplo jsfiddle

Answer 2

En general, estoy totalmente de acuerdo con el uso del selector css de Jason, pero en algunos casos puede que no desee cambiar el css, por ejemplo, al usar una plantilla css de un tercero, y prefiera agregar / eliminar una clase en el elemento.

El siguiente ejemplo muestra una forma simple de agregar / eliminar una clase en 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>

con un poco de estilo:

.red {
  background-color: red;
}

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

Ver ejemplo de ejecución aquí: jsfiddle sample

El estilo de vuelo estacionario es una preocupación de vista. Aunque la solución anterior establece una propiedad "hover" en el alcance actual, el controlador no necesita preocuparse por esto.

Answer 3

Esta es mi solución para mi escenario:

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

estado predeterminado:

en vuelo estacionario:

Answer 4

Me he encontrado con problemas en el pasado con IE y el selector css: hover, por lo que el enfoque que he adoptado es el uso de una directiva personalizada.

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

luego, en el elemento en sí puede agregar la directiva con los nombres de clase que desea habilitar cuando el mouse está sobre el elemento, por ejemplo:

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

Esto debería agregar el control deslizante de la clase y el tinte cuando el mouse está sobre el elemento y no corre el riesgo de una colisión de nombre de variable de ámbito. No he probado, pero los eventos mouseenter y mouseleave deben seguir apareciendo en el elemento contenedor, por lo que en el escenario dado, lo siguiente debería funcionar

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

proporcionando, por supuesto, que los li''s son de hecho hijos del padre div