如何在Angular中删除悬停效果

I am trying to build an angular app and recently I have one problem.

我正在尝试构建一个角度应用程序，最近我有一个问题。

I have something like this

我有类似的东西

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

JS controller:

JS控制器：

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

Css:

CSS：

.item {
    color: red;
    …more css
}

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

.selectThis {
    color:blue;
}

It works well on desktop but the hover effect will remain on touch device when user touches the div. I know I can add the media query to solve this but I think that's a outdated approach. Is there anyways I can solve it with Angular way? Thanks a lot!

它在桌面上运行良好，但当用户触摸div时，悬停效果将保留在触摸设备上。我知道我可以添加媒体查询来解决这个问题，但我认为这是一种过时的方法。无论如何我可以用Angular方式解决它吗？非常感谢！

2 个解决方案

#1

You could solve it with Angular by adding a class when a touch events are fired:

您可以通过在触发事件触发时添加类来使用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);
      });
    }
  };
});

Then you can add this directive to any element you want. It will add the touch class whilst there is a touch in progress and it will remove it when the touch is over.

然后，您可以将此指令添加到所需的任何元素。它会在触摸过程中添加触摸类，并在触摸结束时将其删除。

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

You can treat this class almost like the hover pseudo selector:

您可以像处理悬停伪选择器一样对待此类：

.item {
  color: red;
  …more css
}

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

.selectThis {
  color:blue;
}

#2

You can also do something on the touch events:

您还可以在触摸事件上执行某些操作：

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

And make a directive which handles the touch event

并制定一个处理触摸事件的指令

    .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: i didn't try this code, is just a draft. I hope it helps

PD：我没试过这个代码，只是一个草案。我希望它有所帮助

#1