如何使用hammer.js与Angular.js [英] How to use hammer.js with Angular.js

问题描述

我是新与 Angular.js 并阅读我知道棱角不要有像自来水，双击，等我想事件与 Hammer.js 结合起来都没有成功。

I'm new with Angular.js and reading i know angular dont have events like tap, double tap, etc. I'm trying to combine with Hammer.js without success.

code 要点

/**
 * 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文件

now i've added to my html file

<!--...-->
<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中使用这是行不通的。

But when i try to use in my html it doesn't work.

我试着

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

没有一部作品，可以帮我这个麻烦？

no one works, can help me with this trouble?

推荐答案

这给一展身手。

添加hammer.js和jquery.hammer.js到您的解决方案。使用jQuery和角度。

Add hammer.js and jquery.hammer.js to your solution. With JQuery and 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>

然后用角指令来定义新的HTML属性。

在这个例子中，我创建了一个名为新属性的 上抽头

In this example I am creating a new attribute called 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']);
             });
         };
       });

您可以创建每个锤事件指令：

You can then create a directive per Hammer event:

保持，水龙头，doubletap，transformstart，变换，transformend，的dragstart，拖动，dragend，发布，轻扫。

hold, tap, doubletap, transformstart, transform, transformend, dragstart, drag, dragend, release, swipe.

然后，您的HTML是这样的：

Your HTML would then look like this:

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

这篇关于如何使用hammer.js与Angular.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！