如何采用了棱角分明的指令

Question

在我的手机应用程序来处理单个HTML元素上多点触摸事件，我已经在那里我展示的内容主要观点，在HTML：

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

为了使用处理swipe和touch事件jQuery的（或Hammer.js），我创建了这两个指令：

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(); 
       } 
      } 
     } 
    } 
}); 

Answer 2

某处，你需要重置swiping为false。这可能应该作为touchstart回调的一部分来完成。