Question

我想在某些条件下启用和禁用元素上的悬停状态。角度非常新，所以不知道如何接近它。也没有在网上找到解决方案。

虚拟CSS代码：

xyz{
   background:#2f9bdb;
}

xyz:hover{
   background:#d7d7d7;
}

HTML：

<button ng-click="toggleEnable()"></button>
<div class="xyz" on-hover-select></div>

ng-app和ng-module完成。我的JS：

 angular.module('myModule',[])
    .controller('myCtrl',function($scope){
       $scope.enableHover=true;
       $scope.toggleEnable=function(){
          return $scope.enableHover=!$scope.enableHover;
       }

    }).directive('onHoverSelect',function(){
         return{
              restrict:'A',
              link:function(scope,ele,attrs){
                 if(scope.enableHover){
                       //enable hover
                  }else{
                     //disable hover
                  }
             }
         }

    });

我尝试在角元素上使用bind unbind on off但它不起作用。还将指令更新自己的enableHover值更改？可能是基本的，但对框架来说是非常新的。请帮忙

Answer 1

ele.css("pointer-event", "none");将阻止使用游标触发的所有事件。甚至点击事件也不会开火。但如果您不需要任何事件但是悬停，这将是您最快的解决方案 ele.css("pointer-event", "");会重置

Answer 2

我喜欢@Mephiztopheles的答案，但确实有它的局限性和风险。首先，如果您需要支持IE＆lt; 11，那么指针事件就会消失。其次，正如所指出的，这将删除所有鼠标事件，包括点击。

我建议您更改CSS并使用悬停添加单独的类，然后您可以切换该类。您甚至可以使用内置的ngClass指令来执行此操作。

＆＃13;

angular.module('demo', []).controller('MainCtrl', ['$scope', function($scope){
  $scope.hoverme = true;
}]);

＆＃13;

.box {
  height: 100px;
  width: 100px;
  background-color: teal;
  -webkit-transition: all .5s linear;
}

.hover:hover {
  background-color: orange;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>

<div ng-app="demo" ng-controller="MainCtrl">
  <div class="box" ng-class="{hover: hoverme}"></div>
  <button ng-click="hoverme = !hoverme">Toggle Hover</button>
</div>

＆＃13;

Answer 3

您可以尝试使用css悬停来强制模板部分以重绘。

我在菜单上做到了这一点，该菜单在css悬停时打开，在单击链接时应关闭。尝试删除CSS类，但工作有问题（有时悬停有时不是随机关闭的）。

我最终清除了菜单项，然后将它们重新设置回原位，这将重新呈现菜单并取消悬停。这有点矫kill过正，但是没有直接的方法可以与js对抗css悬停。

let archivedMenuData = $rootScope.topMenuData;
$rootScope.topMenuData = [];
setTimeout(function () {
        $rootScope.$apply();
        $rootScope.topMenuData = archivedMenuData;
    },
    50);

在AngularJS中禁用并启用悬停

3 个答案: