更改触地和向上事件的多个元素类答案

【问题标题】：Change multiple elements class on touch down and up events更改触地和向上事件的多个元素类
【发布时间】：2015-01-27 20:56:15
【问题描述】：

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

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

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

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

【问题讨论】：

你能至少展示一些你拥有的代码/标记吗？

标签： css angularjs hover angular-touch

【解决方案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();
                    });
                }
            }
        });

【讨论】：