come ottenere un evento di pressatura lunga in j angolari?

Question

Sto cercando di ottenere un evento di stampa lungo in js angolare. Ho trovato la soluzione da qui https://gist.github.com/BobNisco/9885852 Ma non riesco a ottenere la console di accesso .qui è il mio codice. http://goo.gl/ZpDeFz la prego di dirmi dove sto ottenendo sbagliato ..

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

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

Answer 1

Il codice non funziona perché la direttiva si lega agli elementi touchstart e touchend eventi che probabilmente non state utilizzando, se sei test in un browser.

Quando li ho modificati in mousedown e mouseup lo script ha funzionato bene sul browser del mio computer.

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

E 'una buona implementazione: esempio

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

utilizzati:

<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/

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

Answer 3

passare attraverso il seguente URL per la direttiva angolare e gli approcci di implementazione,

Il codice sorgente per lungo direttiva stampa:

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

tuo HTML dovrebbe essere così :

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

Controller JS funct ioni per fare le definizioni che si preferisce:

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

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

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