AngularJS : ngTouch 300ms 지연

Question

이 Plunkr에는 2 개의 링크가 있습니다. 왼쪽에있는 것은 앵글 터치 모듈이 삽입 된 ng-click 지시문을 사용하고 있습니다. ng-click에 대한 각도 터치 모듈 설명에서 언급했듯이 ng-click 링크에는 300ms 지연이 없어야합니다. 그러나 모바일 장치에서 테스트하면 여전히 그렇습니다.

그래서 iFrame 등에서 실행되었거나 정확하게 작동하기 위해 Fastclick.js를 프로젝트에 삽입해야하기 때문에 plunkr이 올바른 기능을 방해합니까? 나는 그것을 얻지 않는다. 제발 도와 줘.

예 : http://plnkr.co/NRRrmMFaIKg2zLu5C1Tg

편집 : AngularJS와 문서의 example 중 하나를 작동하지 IST. 그들은 각도 터치 모듈을 삽입하지 않았습니다.

Answer 1

angulars ngTouch 모듈은 ng-click 지시어에서 300ms 지연 만 제거하기 때문에 각도와 완벽하게 잘 일치하는 fastclick.js을 사용하고 있습니다.

처음에는 DOM이 준비되기 전에 스크립트가로드되기 전에 Fastclick 라이브러리가 첨부되었으므로 처음에는 제대로 작동하지 않았습니다. 내 각도 애플 run block에 함수를 래핑하여 이것을 해결했습니다. 이 함수는 DOM이 준비된 후에 코드를 실행합니다.

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

이 방법은 AngularJS와 유튜브 채널에 latest screencast에 의해 제안된다.

Answer 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 코드를로드 할 필요가 없습니다.