AngularJS: ngTouch 300ms Retard

Ce Plunkr a 2 liens. L'une sur le côté gauche est à l'aide de la ng-cliquez sur la directive sur le angulaires-touch module inséré. Comme dit dans l'angle de contact description du module pour le gn-cliquez sur le ng-cliquez sur le lien ne devrait pas avoir d'300ms retard. Mais si vous testez sur des appareils mobiles, c'est toujours le cas.

Est donc plunkr la prévention de la fonctionnalité correcte parce que son exécuté dans une iFrame ou quelque chose comme ça, ou est-il nécessaire d'insérer Fastclick.js dans le projet de directive de travailler correctement ? Je ne comprends pas, s'il vous plaît aider.

Exemple: http://plnkr.co/NRRrmMFaIKg2zLu5C1Tg

edit: la exemple dans le angularjs docs ist ne fonctionne pas non plus. Ils n'ont même pas inséré le angulaires-module tactile.

  • Donc, apparemment, c'est toujours un question depuis angulaire 1.2.0 qui n'est pas encore résolus. Heureusement, vous pouvez simplement insérer fastclick.js pour la bonne et tous les ng-click va déclencher rapidement ensuite. Il suffit d'ajouter le fastclick.js fichier à votre projet et insérer son code de démarrage en dehors de toute angulaire. CORDIALEMENT j'ai édité le plunkr à partir de l'exemple de test de performances entre certains fastclick méthodes. Il semble que la ng-cliquez sur la directive reconnaît le moins de clics, si vous cliquez souvent test.
  • Hé!.. avez-vous trouvé une solution à ce problème?
  • En raison des restrictions de ngTouch , qui ne supprime 300 ms de retard sur le ng-cliquez sur la directive, je suis en utilisant fastclick.js maintenant. Le problème que j'ai eu, c'est que j'ai instancié Fastclick avant sa Bibliothèque a été chargé. Par conséquent, il n'a pas de travail. En l'enveloppant dans angulaire.run() a résolu mon problème, en instanciant fastlick lorsque le DOM Angulaire est prêt.
InformationsquelleAutor strangfeld | 2013-12-21
  1. 56

    Parce que angulars ngTouch module est seulement enlever la 300ms de retard sur ng-cliquez sur les directives, je suis en utilisant fastclick.js maintenant qui harmonates parfaitement bien angulaire.

    Au début il ne fonctionne pas pour moi, parce que j'ai attaché le Fastclick bibliothèque avant son script a été chargé, avant que le DOM est prêt. J'ai fixé ce, en les enveloppant de la fonction dans le exécuter le bloc de mon angulaire de l'app. Cette fonction exécute le code après le DOM est prêt.

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

    De cette façon est suggéré par la dernière screencast sur le angularjs chaîne youtube.

    • Quel est le timestamp quand il mentionne que? J'ai essayé le transfert rapide grâce à la vidéo
    • href="http://youtu.be/xOAG7Ab_Oz0?t=20m48s" >youtu.être/xOAG7Ab_Oz0?t=20m48s juste à la regarder pendant environ 1 minute et vous verrez 😉
    • Ne fonctionne pas correctement avec angulaire de l'info-bulle
    • que voulez-vous dire angulaire info-bulle ? voulez-vous dire que l'info-bulle de la directive de la angular-ui-bootstrap module ? ou tu veux dire quoi ?
    • Oui le angular-ui-bootstrap info-bulle. Il fonctionne, lorsque l'info-bulle-trigger="cliquez sur" est ajouté
    • 38:30 youtu.être/xOAG7Ab_Oz0?t=38m30s

    InformationsquelleAutor strangfeld
  2. 0

    J'ai résolu ce problème en écrivant mon propre directive qui écoute les deux touchstart et mousedown événements (ou touchend /mouseup, etc.). De dupe, j'ai mis un drapeau lors d'un événement tactile qui se passe, et si le drapeau est réglé j'ai ignoré tous les événements de la souris (depuis les événements tactiles arriver avant les événements de souris, pas de doubles résulterait en une double feux sur les appareils mobiles). 

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

    Vous pouvez ensuite ajouter les lk-click="javascript()" directive dans votre application html.

    À l'aide de Fastclick est plus facile et plus rapide, mais c'est plus personnalisable et ne vous obligent pas à charger Fastclick code.

    • Il devrait fonctionner très bien, mais vous devez vous désabonner à partir d'événements sur le champ d'application de détruire, sinon vous aurez des fuites de mémoire dans votre application. Utilisez simplement l'élément.off(<event>).
    InformationsquelleAutor Luke Knepper
  3. 0
       //Evita doble tap en dispositivos mobiles
    var TIME_BETWEEN_CLICK = 0;
    App.directive('ngSubmit', function () {
      return {
        restrict: 'A',
        replace: false,
        link: function (scope, el, attrs) {
          el.bind('submit', function (e) {
            if ((new Date().getTime() - TIME_BETWEEN_CLICK) > 300) {
              TIME_BETWEEN_CLICK = new Date().getTime();
            } else {
              e.stopImmediatePropagation();
            }
          });
        }
      };
    });

    App.directive('ngClick', function () {
      return {
        restrict: 'A',
        replace: false,
        link: function (scope, el) {
          el.bind('click', function (e) {
            if ((new Date().getTime() - TIME_BETWEEN_CLICK) > 300) {
              TIME_BETWEEN_CLICK = new Date().getTime();
            } else {
              e.stopImmediatePropagation();
            }
          });
        }
      };
    });
    InformationsquelleAutor matias ezequiel marani