AngularJS - ng-mouseleaveが正しくウォーキングされないのはなぜですか？

Question

私のために、なぜng-mouseenterとng-mouseleaveが正しく動作していないのかわからないので、コードを投稿しています...マウスは、 （left/right）とmouseleaveで、時々起こることはありません。私はctrlキープレスイベントを監視する必要があるので、必要なクラスを適用するためにCSSを使用することはできません。 ng-mouseenter/leave。私もng-mouseover/outで試してみました。彼らはほとんど働いていません。なぜそれが、どのようにそれを修正するか、任意のアイデア？私はとても感謝しています。

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

Answer 1

私はAngularjsでjQueryのを使用する場合、いくつかの問題がありました。

私は非常に多くの先輩がそう私は1つを提案しますDo not use JQuery with Angularjs、

をお勧め見てきました。

こちらがお役に立てば幸いです。 :)

これを確認してください。

Change color of div

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

多分これはあなたの目的は同じではありません。

さらに詳しい情報が必要な場合は、フィードバックをお願いします。 :)

Answer 2

AngularjsでJQueryを使用できますが、jQueryの$記号をjQueryとして設定する必要があります。