Angular: Empty Fiddle
http://angularjs.org/
HTML
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div ng-controller="MyCtrl">
<div ng-repeat="image in images">
<p ng-show="image.show" on-long-press="image.show = false">
{{image.url}}
</p>
</div>
</div>
JavaScript
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', ['$scope', '$timeout', function ($scope, $timeout) {
$scope.images = [];
$timeout(function () {
$scope.images = [{
show: true,
url: 'some/url.jpg'
},{
show: true,
url: 'some/url.jpg'
},{
show: true,
url: 'some/url.jpg'
}];
}, 250);
}]);
// taken from https://github.com/puneethrai/angular-long-press/blob/master/dist/angular-long-press.js
myApp.directive('onLongPress', ['$parse', '$timeout', function ($parse, $timeout) {
return {
restrict: 'A',
link: function ($scope, $elm, $attrs) {
var timer;
var timerDuration = (!isNaN($attrs.longPressDuration) && parseInt($attrs.longPressDuration)) || 600;
// By default we prevent long press when user scrolls
var preventLongPressOnScroll = ($attrs.preventOnscrolling ? $attrs.preventOnscrolling === 'true' : true)
// Variable used to prevent long press while scrolling
var touchStartY;
var touchStartX;
var MAX_DELTA = 15;
// Bind touch, mouse and click event
$elm.bind('touchstart', onEnter);
$elm.bind('touchend', onExit);
$elm.bind('mousedown', onEnter);
$elm.bind('mouseup', onExit);
$elm.bind('click', onClick);
// For windows mobile browser
$elm.bind('pointerdown', onEnter);
$elm.bind('pointerup', onExit);
if (preventLongPressOnScroll) {
// Bind touchmove so that we prevent long press when user is scrolling
$elm.bind('touchmove', onMove);
}
function onEnter(evt) {
var functionHandler = $parse($attrs.onLongPress);
// For tracking scrolling
if ((evt.originalEvent || evt).touches) {
touchStartY = (evt.originalEvent ||...