2

我是 Angular 的新手,我正在尝试使用 angular-hammer.js 指令获取水龙头的 XY 坐标。以下是指令的设置方式:

var hmTouchevents = angular.module('hmTouchevents', []),
hmGestures = ['hmHold:hold',
              'hmTap:tap',
              'hmDoubletap:doubletap',
              'hmDrag:drag',
              'hmDragup:dragup',
              'hmDragdown:dragdown',
              'hmDragleft:dragleft',
              'hmDragright:dragright',
              'hmSwipe:swipe',
              'hmSwipeup:swipeup',
              'hmSwipedown:swipedown',
              'hmSwipeleft:swipeleft',
              'hmSwiperight:swiperight',
              'hmTransform:transform',
              'hmRotate:rotate',
              'hmPinch:pinch',
              'hmPinchin:pinchin',
              'hmPinchout:pinchout',
              'hmTouch:touch',
              'hmRelease:release'];

angular.forEach(hmGestures, function(name){
  var directive = name.split(':'),
  directiveName = directive[0],
  eventName = directive[1];
  hmTouchevents.directive(directiveName, ["$parse", function($parse) {
    return {
      scope: true,
      link: function(scope, element, attr) {
        var fn, opts;
        fn = $parse(attr[directiveName]);
        opts = $parse(attr["hmOptions"])(scope, {});
        scope.hammer = scope.hammer || Hammer(element[0], opts);
        return scope.hammer.on(eventName, function(event) {
          return scope.$apply(function() {
            return fn(scope, {
              $event: event
            });
          });
        });
      }
    };
    }
  ]);
});

我的 html 看起来像这样:

<div ng-controller="IndexCtrl" >
    <div class='tap-area' hm-tap="tap();">
    </div>
</div>

我的控制器如下所示:

App.controller('IndexCtrl', function ($scope, Myapp) {

$scope.tap = function(ev){
     //How do I get the event.gesture.center.pageX in here?
};

});
4

2 回答 2

1

我想出了如何使这项工作。return scope.hammer.on(eventName, function(event) {添加之后scope.event = event;,然后在我的控制器中,我可以使用this.event.center.pageX或获得水龙头的 XY 坐标this.event.center.pageY

于 2013-09-20T06:33:31.213 回答
0

它是很久以前发布的,但这是另一个解决方案。

只需将 $event 添加到您的 html

于 2020-09-28T08:54:53.833 回答