angularjs - 如何使用 Angular 指令处理单个 HTML 元素上的多个触摸事件

Question

在我的移动应用程序中，我有一个以 HTML 格式显示内容的主视图:

<div class="imageView" na-swipe="next()" na-tap="showControls()"> content here </div>

为了使用 jQuery(或 Hammer.js)处理 swipe 和 touch 事件，我创建了这两个指令:

angular.module("naModule").directive 'naTap', ->
  (scope, element, attrs) ->
    tapping = false
    element.bind 'touchstart', -> tapping = true
    element.bind 'touchmove', -> tapping = false
    element.bind 'touchend', -> scope.$apply(attrs['naTap']) if tapping

angular.module("naModule").directive 'naSwipe', ->
  (scope, element, attrs) ->
    tapping = false
    swiping = false
    element.bind 'touchstart', -> tapping = true
    element.bind 'touchmove', -> swiping = true
    element.bind 'touchend',  -> scope.$apply(attrs['naSwipe']) if (swiping and tapping)

naSwipe 似乎运行良好，即每当执行滑动时都会调用 next()...但是，当我点击 next() 时 和 showControls() 都在触发...如何干净地分离这个 div 上的触摸和滑动？ 谢谢。

Answer 1

我认为您针对您的用例以错误的方式处理此问题。

考虑使用一个指令，其模板是您所描述的标记，并定义要在该指令的 link() 函数中捕获的事件。

类似于以下指令:

angular.module('naModule').directive('imageView', function() {
    return {
        restrict: 'E',
        replace: true,
        scope: {
            // As required for your content ...
        },
        template: '<div class="imageView"> content here </div>',
        controller: function($scope, $attrs) {
            $scope.next = function() {
                // handle function..
            }

            $scope.showControls = function() {
                // handle function..
            }
        },
        link: function(scope, element, attrs, controller) {
            element.bind('touchstart', function(e) {
                scope.tapping = true;
                scope.swiping = true;
            }

            element.bind('touchmove', function(e) {
                scope.tapping = false;
                scope.swiping = true;
            }

            element.bind('touchend', function(e) {
                if(scope.tapping) {
                    scope.next();
                } else {
                    scope.showControls();
                }
            }
        }
    }
});