如何在Angular.js中使用Hammer.js

如何在Angular.js中使用Hammer.js

快去

将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>

然后使用Angular指令定义新的HTML属性。

在此示例中，我将创建一个名为

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>