Как справиться с длинным кликом в угловом для мобильного?

Question

Я хочу добиться простого долгого нажатия (длинное нажатие) события с угловым, работающим и на мобильных устройствах.

Live code

РАБОТА НА

1. Chrome - настольный
2. Chrome мобильный инспектор

НЕ РАБОТАЕТ НА

1. IOS (хром/Safari) - реального устройства
2. Android (хром) - реального устройства

HTML

<div class="container-fluid" ng-app="app" ng-controller="MainCtrl"> 
    <center> 
    <h3 ng-bind="test"></h3> 
    <div class="box noselect" 
     on-long-press="itemOnLongPress()" 
     on-touch-end="itemOnTouchEnd()"> 
     <span>Document</span> 
    </div> 
    </center> 
</div> 

JAVASCRIPT

angular.module('app',[]) 
    .directive('onLongPress', function($timeout) { 
    return { 
     restrict: 'A', 
     link: function($scope, $elm, $attrs) { 
     $elm.bind('mousedown', function(evt) { 
      // Locally scoped variable that will keep track of the long press 
     $scope.longPress = true; 

     // We'll set a timeout for 600 ms for a long press 
     $timeout(function() { 
      if ($scope.longPress) { 
      // If the touchend event hasn't fired, 
      // apply the function given in on the element's on-long-press attribute 
      $scope.$apply(function() { 
       $scope.$eval($attrs.onLongPress) 
        }); 
       } 
      }, 600); 
     }); 

     $elm.bind('mouseup', function(evt) { 
      // Prevent the onLongPress event from firing 
      $scope.longPress = false; 
      // If there is an on-touch-end function attached to this element, apply it 
      if ($attrs.onTouchEnd) { 
      $scope.$apply(function() { 
       $scope.$eval($attrs.onTouchEnd) 
       }); 
      } 
     }); 
    } 
    }; 
}) 

.controller('MainCtrl', function($scope){ 
    $scope.test = 'Angular 1.4.7'; 
    $scope.itemOnLongPress = function(){ 
    $scope.test = "Long pressed"; 
    }; 
    $scope.itemOnTouchEnd = function(){ 
    $scope.test = "Touch end"; 
    }; 
}); 

CSS

.box{ 
    width:300px; 
    height:300px; 
    background:black; 
    color:#fff; 
    font-size:20px; 
} 
.noselect { 
    -webkit-touch-callout: none; /* iOS Safari */ 
    -webkit-user-select: none; /* Chrome/Safari/Opera */ 
    -khtml-user-select: none; /* Konqueror */ 
    -moz-user-select: none;  /* Firefox */ 
    -ms-user-select: none;  /* Internet Explorer/Edge */ 
    user-select: none;   /* Non-prefixed version, currently 
           not supported by any browser */ 
} 

Answer 1

Вы должны использовать touchstart и touchend вместо Long Press in JavaScript?

$elm.bind('touchstart', function(evt) { 
    // Locally scoped variable that will keep track of the long press 
    $scope.longPress = true; 

    // We'll set a timeout for 600 ms for a long press 
    $timeout(function() { 
     if ($scope.longPress) { 
      // If the touchend event hasn't fired, 
      // apply the function given in on the element's on-long-press attribute 
      $scope.$apply(function() { 
       $scope.$eval($attrs.onLongPress) 
      }); 
     } 
    }, 600); 
}); 

$elm.bind('touchend', function(evt) { 
    // Prevent the onLongPress event from firing 
    $scope.longPress = false;