javascript - ng-click function

AngularJS: ngTouch 300ms Delay

Question

Este Plunkr tiene 2 enlaces. El del lado izquierdo usa la directiva ng-click con el módulo angular-táctil insertado. Como se dijo en la descripción del módulo táctil angular para ng-clic, el enlace ng-click no debería tener un retraso de 300ms. Pero si lo prueba en dispositivos móviles, este sigue siendo el caso.

Entonces, ¿está plunkr evitando la funcionalidad correcta porque se ejecuta en un iFrame o algo así o se requiere insertar Fastclick.js en el proyecto para que la directiva funcione correctamente? No lo entiendo, por favor ayuda.

Ejemplo: http://plnkr.co/NRRrmMFaIKg2zLu5C1Tg

editar: el example en angularjs docs tampoco funciona. Ni siquiera insertaron el módulo táctil angular.

Answer 1

Debido a que el módulo ngTouch de angulars solo está eliminando la demora de 300 ms en las directivas ng-click, ahora estoy usando fastclick.js que perjudica perfectamente a angular.

Al principio no funcionó, porque adjunté la biblioteca Fastclick antes de que se cargara el script, antes de que DOM estuviera listo. Lo arreglé envolviendo la función en el bloque de ejecución de mi aplicación angular. Esta función ejecuta código después de que el DOM esté listo.

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

Esta forma es sugerida por el último screencast en el canal angularjs de youtube.

Answer 2

He resuelto esto escribiendo mi propia directiva que escucha los eventos touchstart y mousedown (o touchend / mouseup , etc.). Para quitar el engaño, configuro un indicador cuando ocurre un evento táctil y, si el indicador está establecido, ignoré todos los eventos del mouse (ya que los eventos táctiles suceden antes que los eventos del mouse, no quitarlos duplicaría el doble de incendios en los dispositivos móviles).

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

Luego puede agregar la directiva lk-click="javascript()" en el html de su aplicación.

Usar Fastclick es más fácil y rápido, pero es más personalizable y no requiere que cargue código Fastclick.

Answer 3

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