Skip to content

Instantly share code, notes, and snippets.

@BobNisco
Last active February 27, 2023 15:43

Revisions

  1. BobNisco revised this gist Apr 22, 2014. 1 changed file with 13 additions and 13 deletions.
    26 changes: 13 additions & 13 deletions directive.js
    Original file line number Diff line number Diff line change
    @@ -2,33 +2,33 @@
    .directive('onLongPress', function($timeout) {
    return {
    restrict: 'A',
    link: function(scope, elm, attrs) {
    elm.bind('touchstart', function(evt) {
    link: function($scope, $elm, $attrs) {
    $elm.bind('touchstart', function(evt) {
    // Locally scoped variable that will keep track of the long press
    scope.longPress = true;
    $scope.longPress = true;

    // We'll set a timeout for 1 second for a long press
    // We'll set a timeout for 600 ms for a long press
    $timeout(function() {
    if (scope.longPress) {
    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)
    $scope.$apply(function() {
    $scope.$eval($attrs.onLongPress)
    });
    }
    }, 600);
    });

    elm.bind('touchend', function(evt) {
    $elm.bind('touchend', function(evt) {
    // Prevent the onLongPress event from firing
    scope.longPress = false;
    $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)
    if ($attrs.onTouchEnd) {
    $scope.$apply(function() {
    $scope.$eval($attrs.onTouchEnd)
    });
    }
    });
    }
    };
    });
    })
  2. BobNisco revised this gist Apr 22, 2014. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion directive.js
    Original file line number Diff line number Diff line change
    @@ -16,7 +16,7 @@
    scope.$eval(attrs.onLongPress)
    });
    }
    }, 1000);
    }, 600);
    });

    elm.bind('touchend', function(evt) {
  3. BobNisco revised this gist Apr 22, 2014. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions directive.js
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,5 @@
    // Add this directive where you keep your directives
    .directive('onLongPress', function() {
    .directive('onLongPress', function($timeout) {
    return {
    restrict: 'A',
    link: function(scope, elm, attrs) {
    @@ -8,7 +8,7 @@
    scope.longPress = true;

    // We'll set a timeout for 1 second for a long press
    setTimeout(function() {
    $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
  4. BobNisco created this gist Mar 31, 2014.
    10 changes: 10 additions & 0 deletions controller.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,10 @@
    // 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');
    }
    34 changes: 34 additions & 0 deletions directive.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,34 @@
    // Add this directive where you keep your directives
    .directive('onLongPress', function() {
    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 1 second for a long press
    setTimeout(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)
    });
    }
    }, 1000);
    });

    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)
    });
    }
    });
    }
    };
    });
    3 changes: 3 additions & 0 deletions example.html
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,3 @@
    <ion-item ng-repeat="item in list" on-long-press="itemOnLongPress(item.id)" on-touch-end="itemOnTouchEnd(item.id)">
    {{ item }}
    </ion-item>