如何在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觸發了我的函數。 我需要類似ng-double-tab的功能來啟動雙擊。 我一直在閱讀有關Hammer的更多信息，並且將使用Angular Hammer進行雙擊，但是我不確定它是如何工作的...

Answer 1

您可以使用ios-dblclick ，我編寫的指令用於在移動瀏覽器上處理雙擊事件（為iOS編寫，但可在其他瀏覽器上使用）。 它沒有依賴性，並且像ng-dblclick 。 它可以在Github上找到 。

這是一個例子

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

這是該指令的代碼

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

上面的解決方案在我的IOS上不起作用-但是我找到了另一個解決方案，在我的iPhone上工作正常：

只為您分享：

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

    }
};
});