Angular Js 응용 프로그램에서 두 번 누르기를 활성화하는 방법

Question

사용자가 편집 할 항목을 두 번 클릭 할 수있게 해주는 응용 프로그램을 만들었습니다. 휴대 기기에서 동일한 기능을 사용하고 싶습니다. 즉, 사용자가 항목을 수정하기 위해 두 번 탭하면됩니다.

이것을 구현하는 가장 간단한 방법은 무엇입니까? 차라리 어떤 추가 라이브러리 (나는 Hammer와 AngularTouch에 대해 들어 봤지만 이전에는 사용하지 않았다) 나 jQuery (jQuery를 완전히 사용하지 않는 애플 리케이션에서)를 사용하지 않을 것이다.

이 방법을 구현하는 유일한 방법은 라이브러리를 사용하는 것입니다. 가장 가볍고 쉬운 방법은 무엇입니까?

많은 감사

편집 :이 항목 편집에 대한 내 컨트롤러 코드 추가 :

// Double click to edit products 
$scope.editItem = function (item) { 

    item.editing = true; 

}; 

$scope.doneEditing = function (item) { 

    item.editing = false; 
    $http.put('/api/users?id' + $scope.User.id, $scope.User); 

}; 

$scope.cancelEditing = function (item) { 

    item.editing = false; 

}; 

$scope.deleteItem = function (item) { 

    delete $scope.User.todos[item.id]; 

    $http.put('/api/users?id' + $scope.User.id, $scope.User); 

}; 

을 그리고 이것은 내 템플릿입니다 (옥)

p(ng-dblclick="editItem(todo)", ng-hide="todo.editing").todo-title 

    span {{todo.content}} 

    form(ng-submit="doneEditing(todo)" ng-show="todo.editing", class="inline-editing-2") 

     input(type="text", class="form-control", ng-model="todo.content") 

    div.btn-block 

     button(class="btn btn-success mr-1", ng-show="todo.editing", ng-click="cancelEditing(todo)") 

      span(ng-click="doneEditing(todo)").fa.fa-check-circle 

     button(class="btn btn-warning mr-1", ng-show="todo.editing", ng-click="cancelEditing(todo)") 

      span(ng-click="cancelEditing(todo)").fa.fa-times-circle 

그래서 당신이 볼 수 있듯이 ng-doubleclick을 사용하여 제 기능을 발휘합니다. 더블 탭을 해고하기 위해서 더블 탭과 같은 것이 필요할 것입니다. 나는 해머에 대해 더 많이 읽었으며 더블 탭에 Angular Hammer을 사용할 것입니다. 그러나 어떻게 작동하는지 잘 모르겠습니다 ...

Answer 1

당신은 ios-dblclick을 사용할 수 있습니다 내가 모바일 브라우저에서 더블 클릭 이벤트를 처리하기 위해 쓴 지시를 모바일 장치에 대한 doubletaps을 처리하기 위해 사용했습니다으로 (쓰기 iOS 용이지만 다른 브라우저에서도 작동합니다). 의존성이없고 ng-dblclick처럼 작동합니다. 이용 가능합니다. here on Github입니다.

여기 여기 예제

<div ios-dblclick="removePhoto()"></div> 

의 위의 솔루션은 내 IOS에서 작동하지 않는

app.directive('iosDblclick', 
    function() { 

     const DblClickInterval = 300; //milliseconds 

     var firstClickTime; 
     var waitingSecondClick = false; 

     return { 
      restrict: 'A', 
      link: function (scope, element, attrs) { 
       element.bind('click', function (e) { 

        if (!waitingSecondClick) { 
         firstClickTime = (new Date()).getTime(); 
         waitingSecondClick = true; 

         setTimeout(function() { 
          waitingSecondClick = false; 
         }, DblClickInterval); 
        } 
        else { 
         waitingSecondClick = false; 

         var time = (new Date()).getTime(); 
         if (time - firstClickTime < DblClickInterval) { 
          scope.$apply(attrs.iosDblclick); 
         } 
        } 
       }); 
      } 
     }; 
    }); 

Answer 2

언제나 자신의 더블 탭 지시문을 구현할 수 있습니다. 먼저 touchstart과 touchend을 살펴보십시오. 이러한 이벤트에 바인딩하고 지정된 기간 내에 여러 도청을 확인하십시오.

Answer 3

지금까지 라이브러리, 우리는이, 각

https://github.com/technoweenie/jquery.doubletap

Answer 4

이 지침의 코드입니다 -하지만 난에 잘 작동하는 다른 해결책을 발견 내 아이폰 :

그냥 당신을 위해 공유

:

http://jsfiddle.net/9Ymvt/3397/

fessmodule.directive('onDoubleClick', function($timeout) { 
return { 
    restrict: 'A', 
    link: function($scope, $elm, $attrs) {    
     var clicks=0; 

     $elm.bind('click', function(evt) { 
      console.log('clicked'); 

      clicks++; 
if (clicks == 1) { 
$timeout(function(){ 
    if(clicks == 1) { 
     //single_click_callback.call(self, event); 
    } else { 
     $scope.$apply(function() { 
      console.log('clicked'); 
         $scope.$eval($attrs.onDoubleClick) 
        }); 
    } 
clicks = 0; 
}, 300);} 
     }); 

    } 
}; 
});