如何在Angular中刪除懸停效果

Question

我正在嘗試構建一個有角度的應用程序，最近我遇到了一個問題。

我有這樣的東西

<div ng-class="{selectThis : item.pick}" ng-click="pickItem(item)" class="item">Item name here<div>

JS控制器：

$scope.pickItem = function(item) {
    item.pick = true;
}

CSS：

.item {
    color: red;
    …more css
}

.item:hover {
    color:blue;
    ...more css
}

.selectThis {
    color:blue;
}

它在桌面上效果很好，但是當用戶觸摸div時，懸停效果仍將保留在觸摸設備上。 我知道我可以添加媒體查詢來解決此問題，但是我認為這是一種過時的方法。 反正我可以用Angular方法解決嗎？ 非常感謝！

Answer 1

您可以通過觸發觸摸事件時添加一個類來使用Angular解決它：

app.directive('touchClass', function() {
  return {
    restrict: 'A',
    scope: {
      touchClass: '@'
    },
    link: function(scope, element) {   
      element.on('touchstart', function() {
        element.$addClass(scope.touchClass);
      });

      element.on('touchend', function() {
        element.$removeClass(scope.touchClass);
      });
    }
  };
});

然后，您可以將此指令添加到所需的任何元素。 在進行touch時，它將添加touch類別，並且在觸摸結束時將其刪除。

<div ng-class="{selectThis : item.pick}"
     ng-click="pickItem(item)"
     touch-class="touch"
     class="item">
  Item name here
<div>

您可以像對待懸停偽選擇器一樣對待此類：

.item {
  color: red;
  …more css
}

.item.touch {
  color:blue;
  ...more css
}

.selectThis {
  color:blue;
}

Answer 2

您還可以在觸摸事件上執行以下操作：

<div ng-class=="{ 'touch': touchStart}"
  on-touch
 class="item">Item name here<div>

並制定一個處理觸摸事件的指令

    .directive('onTouch',function() {
        return {
            restrict: 'A',
            link: function ($scope, $elem, $attrs) {
                $elem.on('touchstart',function(e) {
                    $scope.touchStart= true;
                    $scope.$apply();
                });
                $elem.on('touchend',function(e) {
                    $scope.touchStart= false;
                    $scope.$apply();
                });
            }
        }
    });

PD：我沒有嘗試這段代碼，只是草稿。 希望對您有所幫助