javascript - 如何在 Angular Js 应用程序上启用双击

Question

我创建了一个应用程序，使用户能够双击要编辑的项目。我想在移动设备上允许相同的功能，这意味着用户可以双击来编辑项目。

实现它的最简单方法是什么？我宁愿不使用任何额外的库(我听说过 Hammer 和 AngularTouch，但之前都没有使用过)和 jQuery(在我的应用程序中我完全放弃了 jQuery)。

如果实现它的唯一方法是使用库，那么什么是最轻量级和最简单的？

非常感谢

编辑:添加代码这是我用于编辑项目的 Controller :

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

};

这是我的模板 (Jade)

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 一样工作。可用here on 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);
                        }
                    }
                });
            }
        };
    });