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

Question

我们有这个广场 <div>具有应用于样式的特定类的元素。里面有一个垂直/水平对齐的 <span>应用了 sprite 类以显示图像的元素。

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

问题是，如何使用 AngularJS 实现这一点并触发上下事件。我们正在使用 angular-touch但这只是覆盖了 ngClick为了更好地实现移动/触摸设备并添加 ngSwipeLeft和 ngSwipeRight指令。两者似乎都无法真正帮助解决我们的问题。

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

Answer 1

我会根据 javascript 事件 touchstart 和 touchend 使用范围 bool 值来指示 div 何时被触摸，然后让 ng-class 根据该 bool 值显示正确的类。示例:

        <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();
                    });
                }
            }
        });