AngularJS: ngTouch 300ms Delay

В этом Plunkr есть 2 ссылки. На левой стороне используется директива ng-click с включенным модулем angular -touch. Как сказано в описании сенсорного модуля angular для ng-click, ссылка ng-click не должна иметь задержку 300 мс. Но если вы протестируете его на мобильных устройствах, это все равно.

Итак, plunkr предотвращает правильную функциональность, потому что он выполняется в iFrame или что-то в этом роде или требуется вставить Fastclick.js в проект, чтобы директива работала правильно? Я не понимаю, пожалуйста, помогите.

Пример: http://plnkr.co/NRRrmMFaIKg2zLu5C1Tg

изменить: пример в документах angularjs тоже не работает. Они даже не вставили модуль angular -touch.

Ответ 1

Поскольку углы модуля ngTouch удаляют только 300 мс по директивам ng-click, я использую fastclick.js, который отлично гармонирует с angular.

Вначале это не сработало для меня, потому что я привязал библиотеку Fastclick до того, как ее загрузили script, прежде чем DOM был готов. Я исправил это, обернув функцию в блоке запуска моего приложения angular. Эта функция выполняет код после готовности DOM.

angular.module('myModule', []).
  run(function() {
    FastClick.attach(document.body);
  });

Этот способ предлагается последним screencast на канале youtube angularjs.

Ответ 2

Я решил это, написав мою собственную директиву, которая прослушивает события touchstart и mousedown (или touchend/mouseup и т.д.). Чтобы обмануть, я устанавливаю флаг, когда происходит событие касания, и если флаг установлен, я игнорировал все события мыши (поскольку события касания происходят до событий мыши, а не удаление дублирования, приведет к двойным пожарам на мобильных устройствах).

appControllers.controller('AppCtrl', ['$scope',
 function($scope) {
  $scope._usingTouch = false;
  /* app code */
}]).directive('lkClick', [function() {
  return function(scope, element, attr) {
    var fn = function() {
      scope.$apply(function() { 
          scope.$eval(attr.lkClick); 
        });
    }

    element.on('touchstart', function(event) {
        scope._usingTouch = true;
        lk();
    });

    element.on('mousedown', function(event) {
      if(!scope._usingTouch)
        lk();
    });
  };
}]);

Затем вы можете добавить директиву lk-click="javascript()" в свой html-приложение.

Использование Fastclick проще и быстрее, но это более настраиваемый и не требует загрузки кода Fastclick.