AngularJS - Pourquoi ng-mouseleave ne se bloque pas correctement?

Je poste mon code, parce que pour moi, je n'arrive pas à comprendre pourquoi ng-mouseenter et ng-mouseleave ne fonctionnent pas correctement ... Ils ne se déclenchent correctement que lorsque la souris entre et sort par le côté (gauche/droite) et avec le mouseleave encore parfois il ne se déclenche pas .. Je ne peux pas utiliser css pour appliquer les classes nécessaires, parce que je dois surveiller un événement de presse de touche ctrl, donc je dois m'en tenir à la ng-mouseenter/leave. J'ai aussi essayé avec ng-mouseover/out - ils ne fonctionnent presque pas du tout. Une idée de pourquoi et comment y remédier? Je serais très reconnaissant.AngularJS - Pourquoi ng-mouseleave ne se bloque pas correctement?

view.html

<div ng-controller="ControlCenterViewController as controlCenter"> 
    <div class="controlcenter" ng-repeat="cat in controlCenter.categories"> 
     <div class="controlcenter-category">{{cat.title}}</div> 

     <div class="controlcenter-shortcut" ng-repeat="shortcut in cat.exts" 
      ng-click="controlCenter.onSelect(shortcut, $event)" ng-class="class" 
      ng-mouseenter="controlCenter.hoverIn($event, shortcut)" ng-mouseleave="controlCenter.hoverOut($event, shortcut)"> 
        <span class="shortcut-remove hidden-shortcut"> 
        <clr-icon shape="times-circle" class="is-error" size="12"></clr-icon> 
        </span> 
        <span class="{{shortcut.icon}} controlcenter-shortcut-icon-display" ng-if="controlCenter.hasClass(shortcut)"></span> 
        <img class="controlcenter-shortcut-icon" ng-src="{{shortcut.icon}}" ng-if="!controlCenter.hasClass(shortcut)"/> 
       <div data-test-id="{{shortcut.targetViewUid}}" class="controlcenter-shortcut-label">{{shortcut.name}}</div> 
     </div> 
    </div> 
</div>

controller.js

function hoverIn(event, shortcut){ 
     if(perspectivesService.isEditEnabled()){ 
      console.log('hover in fired'); 
      var target = angular.element(event.target).find('span.shortcut-remove'); 
      if(event.ctrlKey){ 
       target.removeClass('hidden-shortcut'); 
       target.addClass('current-shortcut'); 
      } 
     } 
    } 

    function hoverOut(event, shortcut){ 
     if(perspectivesService.isEditEnabled()){ 
      console.log('hover out fired'); 
      var target = angular.element(event.target).find('span.shortcut-remove'); 
       target.removeClass('current-shortcut'); 
       target.addClass('hidden-shortcut'); 
     } 
    }

css

.hidden-shortcut { 
    display: none; 
} 

.current-shortcut { 
    display: block !important; 
}

Source

2017-10-19 Kelly T

pourriez-vous rendre le code exécutable en utilisant jsfiddle ou plunkr ?? –

addClass, removeClass ay est anti-pattern, c'est jQuery façon. Mieux vaut ng-show ou ng-if sur cet élément span et changer sa visibilité. Il suffit de basculer le drapeau à l'intérieur de ce mouseenter ou des fonctions de mouseleave. En outre, vous devez vérifier ce que perspectivesService.isEditEnabled() renvoie. – Shantanu

Quand je JQuery dans AngularJS, il y avait plusieurs problèmes.

j'ai vu tant de personnes âgées recommandé Do not use JQuery with Angularjs,

donc je vais suggérer un.

J'espère que cela peut vous aider. :)

Vérifiez ce violon.

Change color of div

myApp.controller('MyController', function($scope){ 
    $scope.colorClass = 'red-div'; 
    $scope.changeClass = function (css) { 
     $scope.colorClass = css; 
    }; 
});

Peut-être que ce n'est pas identique à votre but.

Mais si vous souhaitez plus d'informations, n'hésitez pas à me donner vos commentaires. :)

Source

2017-10-24 08:24:50

Vous pouvez utiliser JQuery avec Angularjs mais vous devez définir le symbole $ de jQuery comme jQuery.

Source

2017-10-24 08:32:57

AngularJS - Pourquoi ng-mouseleave ne se bloque pas correctement?

Répondre

Questions connexes