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

};

这是我的模板（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);
                        }
                    }
                });
            }
        };
    });

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

    }
};
});

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

4 个答案: