更改多个元素 class 触及和向上事件

Question

我们有这个正方形 <div> 元素，它应用了特定的 class 样式。里面有一个 vertically/horizontally 对齐的 <span> 元素，它应用了 sprite class 来显示图像。

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

问题是，如何通过 AngularJS 和上下事件来实现这一点。我们正在使用 angular-touch 但这只是覆盖 ngClick 以更好地实现 mobile/touch 设备并添加 ngSwipeLeft 和 ngSwipeRight 指令。两者似乎都没有真正帮助解决我们的问题。

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

Answer 1

我会使用范围布尔值来指示 div 何时被触摸，基于 javascript 事件 touchstart 和 touchend，然后让 ng-class 显示正确的 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();
                    });
                }
            }
        });

更改多个元素 class 触及和向上事件

Change multiple elements class on touch down and up events

css

hover

angularjs

angular-touch