-
-
Save PariasDev/49aedec54dfa37ba5c00 to your computer and use it in GitHub Desktop.
onLongPress AngularJS Directive - Great for mobile!
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Somewhere in your controllers for this given example | |
// Example functions | |
$scope.itemOnLongPress = function(id) { | |
console.log('Long press'); | |
} | |
$scope.itemOnTouchEnd = function(id) { | |
console.log('Touch end'); | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Add this directive where you keep your directives | |
.directive('onLongPress', function($timeout) { | |
//Global variable, to cancel timer on touchend. | |
var timer; | |
return { | |
restrict: 'A', | |
link: function($scope, $elm, $attrs) { | |
$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 | |
timer = $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); | |
timer; | |
}); | |
$elm.bind('touchend', function(evt) { | |
// Prevent the onLongPress event from firing | |
$scope.longPress = false; | |
// Prevent on quick presses, unwanted onLongPress selection. | |
$timeout.cancel(timer); | |
// If there is an on-touch-end function attached to this element, apply it | |
if ($attrs.onTouchEnd) { | |
$scope.$apply(function() { | |
$scope.$eval($attrs.onTouchEnd) | |
}); | |
} | |
}); | |
} | |
}; | |
}) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<ion-item ng-repeat="item in list" on-long-press="itemOnLongPress(item.id)" on-touch-end="itemOnTouchEnd(item.id)"> | |
{{ item }} | |
</ion-item> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment