Подтвердить что ты не робот

Как использовать hammer.js с Angular.js

Я новичок в Angular.js, и я знаю, что angular не имеет таких событий, как tap, double tap и т.д. Я пытаюсь объединить с 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>

Никто не работает, может помочь мне с этой проблемой?

4b9b3361

ОТВЕТЫ

Ответ 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>

Затем используйте директивы 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:

Удерживайте, коснитесь, дважды нажмите, трансформируйте, преобразуйте, преобразуйте, перетащите, перетащите, перетащите, отпустите, проведите пальцем по экрану.

Ваш HTML будет выглядеть следующим образом:

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

Ответ 4

Я использовал randallb lib и добавил

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

в массиве hmGestures, поэтому я могу использовать pan тоже!