I've created an application which enables the user to double click on an item to edit. I'd like to allow the same functionality on mobile devices, meaning the user would double tap to edit the item.

What is the simplest way to implement this? I'd rather not use any additional library (I have heard of Hammer and AngularTouch but haven't used neither before) nor jQuery (in my app I pletely forgone jQuery).

If there the only way to implement this is using a library, what would be lightest and easiest?

Many thanks

EDIT: Adding code This is my controller for editing the item:

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

};

And this is the my template (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

So as you can see I use ng-doubleclick to fire my function. I'd need something like ng-double-tab to fire up the double tap. I've been reading more about Hammer and will use Angular Hammer for double tap but I'm not sure how it works...

I've created an application which enables the user to double click on an item to edit. I'd like to allow the same functionality on mobile devices, meaning the user would double tap to edit the item.

What is the simplest way to implement this? I'd rather not use any additional library (I have heard of Hammer and AngularTouch but haven't used neither before) nor jQuery (in my app I pletely forgone jQuery).

If there the only way to implement this is using a library, what would be lightest and easiest?

Many thanks

EDIT: Adding code This is my controller for editing the item:

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

};

And this is the my template (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

So as you can see I use ng-doubleclick to fire my function. I'd need something like ng-double-tab to fire up the double tap. I've been reading more about Hammer and will use Angular Hammer for double tap but I'm not sure how it works...

• javascript
• jquery
• ios
• angularjs

• What have you tried and why didn't it work? If you already created the application; what is the reason for re-writing it? – JeffryHouser Commented Apr 21, 2014 at 14:14
• please provide your source code my friend – Ferrakkem Bhuiyan Commented Apr 21, 2014 at 14:18
• @JeffryHouser I'm not rewriting, simple adding another function and/or directive to handle the double tapping. – WagnerMatosUK Commented Apr 21, 2014 at 14:34
• @code360 I've added the source as requested. – WagnerMatosUK Commented Apr 21, 2014 at 14:34

4 Answers 4

You can use ios-dblclick, a directive I wrote to handle double click event on mobile browser (write it for iOS, but works on other browsers). It has no dependency and works like ng-dblclick. It's available here on Github.

Here's an example

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

Here is the code of this directive

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

You could always implement your own double tap directive. Start by looking at touchstart and touchend . Bind to these events, and check for multiple taps within some designated period of time.

As far as libraries, we've used this to handle doubletaps for mobile devices in angular

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

The solution above is not working on my IOS - But I found an other Solution, which is working fine on my IPhone:

Just sharing for you:

http://jsfiddle/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);}
         });

    }
};
});