css - 更改触地和向上事件的多个元素类

Question

我们有这个方形<div>元素，它有一个特定的类应用于样式。里面有一个垂直/水平对齐的<span>元素，它应用了精灵类来显示图像。

正方形有黑色背景，图像是一个扁平的黄色图标。这个想法是当用户触摸整个正方形（包括背景和图像）时切换颜色。为此，我们需要切换 2 个类，打开用于外部<div>（显示黄色背景）和另一个用于内部<span>显示精灵的黑色图像。

问题是，如何使用 AngularJS 和 touch down 和 up 事件来实现这一点。我们正在使用angular-touch但这只是ngClick为了更好地实现移动/触摸设备以及添加ngSwipeLeft和ngSwipeRight指令而覆盖。两者似乎都对我们的问题没有帮助。

使用 AngularJS 实现这种效果的最佳方法是什么？

Answer 1

我会使用一个范围布尔值来指示何时触摸 div，基于 javascript 事件 touchstart 和 touchend，然后让 ng-class 基于该布尔值显示正确的类。例子：

        <style>
            .color-white {
                color : white;
            }
            .background-green {
                background : green;
            }
        </style>

        <button my-touch="myIndicator"
            ng-class="{
                 'color-white'      : myIndicator,
                 'background-green' : myIndicator
            }">Touch this</button>

        .directive('myTouch',function() {
            return {
                link: function ($scope, $elem, $attrs) {
                    var _t = $attrs.myTouch;
                    $elem.on('touchstart touchend',function(e) {
                        $scope[_t] = (e.type === 'touchstart');
                        $scope.$apply();
                    });
                }
            }
        });