CODEWITHSUNDEEP
javascriptjquerycssangularjs
Ankur Aggarwal
Ankur Aggarwal

Reputation: 3101

Disable and Enable Hover in AngularJS

I want to enable and disable hover state on element on some condition. Very new to angular so don't know how to approach towards it. Also didn't find a solution on web.

Dummy CSS Code: 

xyz{
   background:#2f9bdb;
}

xyz:hover{
   background:#d7d7d7;
}

HTML:

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

ng-app and ng-module done. My 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
                  }
             }
         }

    });

I have tried using bind unbind on off on angular element but its not working. Also will directive update itself on enableHover value change? Might be basic one but very new to the framework. Please help

Upvotes: 2

Views: 11774

Answers (3)

Jiro Matchonson
Jiro Matchonson

Reputation: 981

You can try to enforce your template part with css hover to redraw.

I did it for my menu which open on css hover and should close on link click. Tried css classes removal but worked buggy (sometime hover closed sometime not randomly).

I ended up with clearing menu items and then setting them right back, which will rerender menu and cancel hover. Its a bit overkill, but there is no direct way to fight css hover with js. 

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

Upvotes: 0

Xandrios93
Xandrios93

Reputation: 2295

ele.css("pointer-event", "none"); will prevent all events, fired with the cursor. even click events wont fire. but if you dont need any events but hover, this will be your fastest solution ele.css("pointer-event", ""); will reset it

Upvotes: 3

jme11
jme11

Reputation: 17374

I like the answer from @Mephiztopheles, but it does have it's limitations and risks. First, if you need support for IE<11, pointer-events is out. Second, as pointed out, this will remove all mouse events including click.

I suggest instead that you change your CSS and add a separate class with the hover, then you can just toggle that class. You can even use the built in ngClass directive to do it.

angular.module('demo', []).controller('MainCtrl', ['$scope', function($scope){
  $scope.hoverme = true;
}]);
.box {
  height: 100px;
  width: 100px;
  background-color: teal;
  -webkit-transition: all .5s linear;
}

.hover:hover {
  background-color: orange;
}
<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>

Upvotes: 2

Related Questions