AngularJS: ngTouch 300ms Verzögerung

Question

Diese Plunkr hat 2 Links. Auf der linken Seite wird die ng-click-Direktive mit dem eingesteckten eckigen Touch-Modul verwendet. Wie in der eckigen Touch-Modul-Beschreibung für ng-click erwähnt, sollte der ng-click-Link keine 300ms Verzögerung haben. Aber wenn Sie es auf mobilen Geräten testen, ist dies immer noch der Fall.

So verhindert Plunkr die korrekte Funktionalität, weil es in einem iFrame oder ähnlichem ausgeführt wird oder ist es erforderlich, Fastclick.js in das Projekt einzufügen, damit die Anweisung korrekt funktioniert? Ich verstehe es nicht, bitte hilf mir.

Beispiel: http://plnkr.co/NRRrmMFaIKg2zLu5C1Tg

edit: die example in dem AngularJS docs sind auch nicht arbeiten. Sie haben das Winkel-Touch-Modul noch nicht einmal eingebaut.

Answer 1

Weil das anggles ngTouch-Modul nur die 300ms Verzögerung auf ng-click-Anweisungen entfernt, verwende ich jetzt fastclick.js, was perfekt mit eckigen harmoniert.

Am Anfang funktionierte es nicht für mich, weil ich die Fastclick-Bibliothek angeschlossen hatte, bevor das Skript geladen wurde, bevor das DOM fertig war. Ich habe das behoben, indem ich die Funktion in die run block meiner eckigen App eingepackt habe. Diese Funktion führt Code aus, nachdem das DOM bereit ist.

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

Auf diese Weise wird durch die auf den latest screencast AngularJS youtube Kanal vorgeschlagen.

Answer 2

Ich habe dies meine eigene Richtlinie, indem er gelöst, die für beide touchstart und mousedown Ereignisse (oder touchend/mouseup, etc.) hört. Um zu entdupen, setze ich ein Flag, wenn ein Berührungsereignis eintritt, und wenn das Flag gesetzt ist, ignoriere ich alle Mausereignisse (da Berührungsereignisse vor Mausereignissen passieren, führt das Nichtduppen zu doppelten Bränden auf mobilen Geräten).

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(); 
    }); 
    }; 
}]); 

Dann können Sie die lk-click="javascript()" Direktive in Ihrer App html hinzufügen.

Die Verwendung von Fastclick ist einfacher und schneller, aber dies ist anpassbarer und erfordert nicht das Laden von Fastclick-Code.