2

在我的移动应用程序中，我在主视图中以 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 上滑动？谢谢。

4

2 回答 2

3

我认为您以错误的方式处理您的用例。

考虑使用一个指令，其模板是您描述的标记，并在该指令的 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();
                }
            }
        }
    }
});
于 2013-02-19T03:32:47.063 回答
1

在某个地方，您需要重置swiping为 false。这可能应该作为 touchstart 回调的一部分来完成。

于 2013-02-19T15:31:41.530 回答