WagnerMatosUK WagnerMatosUK - 1 year ago 145
iOS Question

How to enable double tap on an Angular Js application

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 completely 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")


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


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


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...

Answer Source

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

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