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类，并在触摸结束时将其删除。

<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：我没有尝试这个代码，只是一个草案。我希望它有所帮助

如何在Angular中删除悬停效果

2 个答案: