-
-
Save bkstorm/5142bd0d9d48e905f99dd9f26e0920c8 to your computer and use it in GitHub Desktop.
onLongPress AngularJS Directive - Great for mobile!
This file contains 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 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) { | |
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 | |
$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; | |
// 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 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