I am looking to implement a feature that enables and disables the hover state on an element based on certain conditions. As a newcomer to Angular, I am unsure of how to approach this and haven't been able to find a solution online.
Here is a sample of the CSS code:
xyz{
background:#2f9bdb;
}
xyz:hover{
background:#d7d7d7;
}
HTML:
<button ng-click="toggleEnable()"></button>
<div class="xyz" on-hover-select></div>
I have already set up ng-app and ng-module. Here is 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 attempted to use bind, unbind, on, and off functions on the Angular element, but it is not functioning as expected. Additionally, I am unsure if the directive will update itself when the value of enableHover changes. This may be a basic issue, but as a beginner to the framework, I would greatly appreciate any guidance.