在AngularJS中禁用並啓用懸停

我想在某些情況下在元素上啓用和禁用懸停狀態。非常新的角度，所以不知道如何接近它。也沒有在網上找到解決方案。在AngularJS中禁用並啓用懸停

假CSS代碼：

xyz{ 
    background:#2f9bdb; 
} 

xyz:hover{ 
    background:#d7d7d7; 
}

HTML：

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

NG-應用和NG-模塊來完成。我的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 
        } 
      } 
     } 

    });

我已經試過對角元件使用綁定解除綁定，但它不工作。也將指令更新本身enableHover值更改？可能是基本的，但對框架來說很新。請幫助

來源

2015-05-21 Ankur Aggarwal

我喜歡@Mephiztopheles的答案，但它確實有它的侷限性和風險。首先，如果您需要IE11的支持，則指針事件不存在。其次，正如指出的那樣，這將刪除包括點擊在內的所有鼠標事件。

相反，我建議你改變你的CSS，並添加一個單獨的類與懸停，然後你可以切換該類。你甚至可以使用內置的ngClass指令來完成它。

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>

來源

2015-05-21 11:53:54 jme11

ele.css("pointer-event", "none");將阻止所有使用遊標觸發的事件。即使點擊事件也不會觸發。但如果你不需要任何事件，但懸停，這將是你最快的解決方案 ele.css("pointer-event", "");將重置它

來源

2015-05-21 11:18:12 Mephiztopheles

在AngularJS中禁用並啓用懸停

回答

相關問題