2

私のモバイル アプリケーションには、HTML でコンテンツを表示するメイン ビューがあります。

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

jQuery (または Hammer.js) を使用しswipeてイベントを処理するために、次の 2 つのディレクティブを作成しました。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()て両方を発射しているとき...この1つのdivでタッチとスワイプをきれいに分離するにはどうすればよいですか? ありがとう。

4

2 に答える 2

3

ユースケースに対して間違った方法でこれに取り組んでいると思います。

説明したマークアップをテンプレートとする 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();
                }
            }
        }
    }
});
于 2013-02-19T03:32:47.063 に答える
1

どこかで、swipingfalse にリセットする必要があります。これは、おそらく touchstart コールバックの一部として行う必要があります。

于 2013-02-19T15:31:41.530 に答える