如何在 Angular.js 中使用hammer.js答案

【问题标题】：How to use hammer.js with Angular.js如何在 Angular.js 中使用hammer.js
【发布时间】：2013-01-21 04:55:27
【问题描述】：

我是 Angular.js 的新手，阅读我知道 angular 没有点击、双击等事件。我正在尝试与 Hammer.js 结合但没有成功。

来自gist的代码

/**
 * angular-hammer.js
 * Inspired by AngularJS' implementation of "click dblclick mousedown..." 
 *
 * This ties in the Hammer events to attributes like:
 * 
 *   hm-tap="add_something()"
 *   hm-swipe="remove_something()"
 *
 * and also has support for Hammer options with:
 *
 *  hm-tap-opts="{hold: false}"
 *
 * or any other of the "hm-event" listed underneath.
 */
angular.forEach('hmTap:tap hmDoubletap:doubletap hmHold:hold hmTransformstart:transformstart hmTransform:transform hmTransforend:transformend hmDragstart:dragstart hmDrag:drag hmDragend:dragend hmSwipe:swipe hmRelease:release'.split(' '), function(name) {
  var directive = name.split(':');
  var directiveName = directive[0];
  var eventName = directive[1];
  angular.module('MYMODULE').directive(directiveName, 
  ['$parse', function($parse) {
    return function(scope, element, attr) {
      var fn = $parse(attr[directiveName]);
      var opts = $parse(attr[directiveName + 'Opts'])(scope, {});
      element.hammer(opts).bind(eventName, function(event) {
        scope.$apply(function() {
          console.log("Doing stuff", event);
          fn(scope, {$event: event});
        });
      });
    };
  }]);
});

现在我已经添加到我的 html 文件中了

<!--...-->
<script src="/js/jquery-1.9.0.js"></script>
    <script src="/js/angular.js"></script>

    <script src="/js/hammer.js"></script>
    <script src="/js/jquery.hammer.js"></script>
    <script src="/js/angular-hammer.js"></script>

    <script src="/js/app/controllers.js"></script>
</html>

但是当我尝试在我的 html 中使用它时它不起作用。

我试过了

<li hmTap="click($event)">...</li>
<li ngTap="click($event)">...</li>
<li hm-tap="click($event)">...</li>
<li ng-tap="click($event)">...</li>

没有人工作，能帮我解决这个问题吗？

【问题讨论】：

请参阅goodfil.ms/blog/posts/2012/08/13/…，了解如何创建支持点击事件的 Angular 指令。
@MarkRajcok 我会检查它

标签： touch angularjs hammer.js

【解决方案1】：

试一试。

将hammer.js 和jquery.hammer.js 添加到您的解决方案中。使用 JQuery 和 Angular。

类似这样的：

<script src="js/jquery/jquery.min.js"></script>
<script src="js/hammer/hammer.js"></script>
<script src="js/hammer/jquery.hammer.js"></script>
<script src="js/angular/angular.min.js"></script>

Then use Angular directives to define new HTML attributes.

在本例中，我创建了一个名为 on-tap

的新属性

angular.module('myApp.directives', [])
       .directive('onTap', function () {
         return function (scope, element, attrs) {
           return $(element).hammer({
             prevent_default: false,
             drag_vertical: false
           })
             .bind("tap", function (ev) {
               return scope.$apply(attrs['onTap']);
             });
         };
       });

然后您可以为每个 Hammer 事件创建一个指令：

按住、点击、双击、transformstart、transform、transformend、dragstart、拖动、dragend、释放、滑动。

您的 HTML 将如下所示：

<button on-tap="DoAngularMethod()">Tap me</button>

【讨论】：

我相信 AngularJS 触摸库要么使用 Hammer，要么复制它的工作方式，您可以在元素上绑定各种事件（在指令内）。可能是值得一看的东西......

【解决方案2】：

这正是您要查找的内容：
https://github.com/wzr1337/angular-gestures

这个新库可让您实现所需的所有手势。
另请阅读：
http://www.ng-newsletter.com/posts/angular-on-mobile.html

希望你觉得它很有趣。 :)

【讨论】：

【解决方案3】：

您可以尝试使用一些针对 Angular 的锤子指令实现：

https://github.com/randallb/angular-hammer

https://github.com/dreame4/angular-hammer

【讨论】：

【解决方案4】：

我使用了 randallb 库并添加了

'hmPan:pan',
'hmPanLeft:panleft',
'hmPanRight:panright',

在 hmGestures 数组中，所以我也可以使用 pan！

【讨论】：