AngularJS - 为什么 ng-mouseleave 不能正常工作？答案

【问题标题】：AngularJS - Why is ng-mouseleave not woking properly?AngularJS - 为什么 ng-mouseleave 不能正常工作？
【发布时间】：2017-10-19 05:08:24
【问题描述】：

我正在发布我的代码，因为为了我，我无法弄清楚为什么 ng-mouseenter 和 ng-mouseleave 不能正常工作......它们只有在鼠标进入和离开时才会正确触发侧面（左/右）和mouseleave有时它仍然不会启动..我不能使用css来应用所需的类，因为我必须注意一个ctrl按键事件，所以我必须坚持ng-鼠标进入/离开。我也尝试过使用 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;
}

【问题讨论】：

你能让你的代码使用 jsfiddle 或 plunkr 运行吗？？
addClass, removeClass 是反模式，是 jQuery 方式。最好在该 span 元素上使用 ng-show 或 ng-if 并更改其可见性。只需在 mouseenter 或 mouseleave 函数中切换标志。此外，您必须检查哪些 perspectivesService.isEditEnabled() 返回。

标签： javascript html css angularjs

【解决方案1】：

当我在 Angularjs 中使用 JQuery 时，出现了几个问题。

看过这么多前辈推荐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;
    };
});

也许这和你的目的不一样。

但如果您想了解更多信息，请给我一些反馈。 :)

【讨论】：

【解决方案2】：

您可以将 JQuery 与 Angularjs 一起使用，但您必须将 jQuery 的 $ 符号设置为 jQuery。

【讨论】：