कोणीय जेएस में लंबी प्रेस घटना कैसे प्राप्त करें?

Question

मैं कोणीय जेएस में लंबी प्रेस घटना प्राप्त करने की कोशिश कर रहा हूं। मुझे https://gist.github.com/BobNisco/9885852 से समाधान मिला लेकिन मैं कंसोल पर लॉग इन नहीं कर पा रहा हूं। मेरा कोड है। http://goo.gl/ZpDeFz क्या आप मुझे बता सकते हैं .. मैं कहाँ गलत हो रही है

$scope.itemOnLongPress = function(id) { 
    console.log('Long press'); 
} 

$scope.itemOnTouchEnd = function(id) { 
    console.log('Touch end'); 
} 

Answer 1

आपका कोड काम नहीं कर रहा है क्योंकि यह निर्देश तत्वों touchstart और touchend किसी घटना के समय आप शायद का उपयोग नहीं कर रहे हैं आप परीक्षण कर रहे हैं करने के लिए बांधता एक ब्राउज़र में

जब मैंने उन्हें mousedown और mouseup में बदल दिया, तो आपकी स्क्रिप्ट ने मेरे कंप्यूटर के ब्राउज़र पर ठीक काम किया।

// pressableElement: pressable-element 
.directive('pressableElement', function ($timeout) { 
    return { 
     restrict: 'A', 
     link: function ($scope, $elm, $attrs) { 
      $elm.bind('mousedown', function (evt) { 
       $scope.longPress = true; 
       $scope.click = true; 

       // onLongPress: on-long-press 
       $timeout(function() { 
        $scope.click = false; 
        if ($scope.longPress && $attrs.onLongPress) { 
         $scope.$apply(function() { 
          $scope.$eval($attrs.onLongPress, { $event: evt }); 
         }); 
        } 
       }, $attrs.timeOut || 600); // timeOut: time-out 

       // onTouch: on-touch 
       if ($attrs.onTouch) { 
        $scope.$apply(function() { 
         $scope.$eval($attrs.onTouch, { $event: evt }); 
        }); 
       } 
      }); 

      $elm.bind('mouseup', function (evt) { 
       $scope.longPress = false; 

       // onTouchEnd: on-touch-end 
       if ($attrs.onTouchEnd) { 
        $scope.$apply(function() { 
         $scope.$eval($attrs.onTouchEnd, { $event: evt }); 
        }); 
       } 

       // onClick: on-click 
       if ($scope.click && $attrs.onClick) { 
        $scope.$apply(function() { 
         $scope.$eval($attrs.onClick, { $event: evt }); 
        }); 
       } 
      }); 
     } 
    }; 
}) 

प्रयोग उदाहरण:

app.directive('onLongPress', function($timeout) { 
    return { 
     restrict: 'A', 
     link: function($scope, $elm, $attrs) { 
      $elm.bind('mousedown', function(evt) { // <-- changed 
       /* ... */ 
      }); 

      $elm.bind('mouseup', function(evt) { // <-- changed 
       /* ... */ 
      }); 
     } 
    }; 
}) 

Answer 2

यह एक अच्छा कार्यान्वयन है

<div pressable-element 
    ng-repeat="item in list" 
    on-long-press="itemOnLongPress(item.id)" 
    on-touch="itemOnTouch(item.id)" 
    on-touch-end="itemOnTouchEnd(item.id)" 
    on-click="itemOnClick(item.id)" 
    time-out="600" 
    >{{item}}</div> 

var app = angular.module('pressableTest', []) 
 

 
.controller('MyCtrl', function($scope) { 
 
    $scope.result = '-'; 
 

 
    $scope.list = [ 
 
     { id: 1 }, 
 
     { id: 2 }, 
 
     { id: 3 }, 
 
     { id: 4 }, 
 
     { id: 5 }, 
 
     { id: 6 }, 
 
     { id: 7 } 
 
    ]; 
 

 
    $scope.itemOnLongPress = function (id) { $scope.result = 'itemOnLongPress: ' + id; }; 
 
    $scope.itemOnTouch = function (id) { $scope.result = 'itemOnTouch: ' + id; }; 
 
    $scope.itemOnTouchEnd = function (id) { $scope.result = 'itemOnTouchEnd: ' + id; }; 
 
    $scope.itemOnClick = function (id) { $scope.result = 'itemOnClick: ' + id; }; 
 
}) 
 

 
.directive('pressableElement', function ($timeout) { 
 
    return { 
 
     restrict: 'C', // only matches class name 
 
     link: function ($scope, $elm, $attrs) { 
 
      $elm.bind('mousedown', function (evt) { 
 
       $scope.longPress = true; 
 
       $scope.click = true; 
 
       $scope._pressed = null; 
 

 
       // onLongPress: on-long-press 
 
       $scope._pressed = $timeout(function() { 
 
        $scope.click = false; 
 
        if ($scope.longPress && $attrs.onLongPress) { 
 
         $scope.$apply(function() { 
 
          $scope.$eval($attrs.onLongPress, { $event: evt }); 
 
         }); 
 
        } 
 
       }, $attrs.timeOut || 600); // timeOut: time-out 
 

 
       // onTouch: on-touch 
 
       if ($attrs.onTouch) { 
 
        $scope.$apply(function() { 
 
         $scope.$eval($attrs.onTouch, { $event: evt }); 
 
        }); 
 
       } 
 
      }); 
 

 
      $elm.bind('mouseup', function (evt) { 
 
       $scope.longPress = false; 
 
       $timeout.cancel($scope._pressed); 
 

 
       // onTouchEnd: on-touch-end 
 
       if ($attrs.onTouchEnd) { 
 
        $scope.$apply(function() { 
 
         $scope.$eval($attrs.onTouchEnd, { $event: evt }); 
 
        }); 
 
       } 
 

 
       // onClick: on-click 
 
       if ($scope.click && $attrs.onClick) { 
 
        $scope.$apply(function() { 
 
         $scope.$eval($attrs.onClick, { $event: evt }); 
 
        }); 
 
       } 
 
      }); 
 
     } 
 
    }; 
 
})

li { 
 
    cursor: pointer; 
 
    margin: 0 0 5px 0; 
 
    background: #FFAAAA; 
 
} 
 

 
.pressable-element { 
 
    -khtml-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
    -webkit-touch-callout: none; 
 
    -webkit-user-select: none; 
 
}

<div ng-app="pressableTest"> 
 
    <div ng-controller="MyCtrl"> 
 
     <ul> 
 
      <li ng-repeat="item in list" 
 
       class="pressable-element" 
 
       on-long-press="itemOnLongPress(item.id)" 
 
       on-touch="itemOnTouch(item.id)" 
 
       on-touch-end="itemOnTouchEnd(item.id)" 
 
       on-click="itemOnClick(item.id)" 
 
       time-out="600" 
 
       >{{item.id}}</li> 
 
     </ul> 
 
     <h3>{{result}}</h3> 
 
    </div> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

JSFiddle: https://jsfiddle.net/reduardo7/u47ok38e/

के आधार पर: https://gist.github.com/BobNisco/9885852

Answer 3

कोणीय निर्देश और कार्यान्वयन दृष्टिकोण के लिए नीचे दिए गए यूआरएल के माध्यम से जाओ,

देर तक दबाए रखने निर्देशक के लिए स्रोत कोड:

// 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) 
       }); 
      } 
     }); 
    } 
}; 
}) 

आपका HTML इस तरह होना चाहिए :

<ion-item ng-repeat="item in list" on-long-press="itemOnLongPress(item.id)" on-touch-end="itemOnTouchEnd(item.id)"> 
{{ item }} 
</ion-item> 

नियंत्रक जेएस Funct

$scope.itemOnLongPress = function(id) { 
    console.log('Long press'); 
} 

$scope.itemOnTouchEnd = function(id) { 
    console.log('Touch end'); 
} 

https://gist.github.com/BobNisco/9885852