làm thế nào để có được sự kiện báo chí dài trong js góc?

Question

Tôi đang cố gắng để có được sự kiện báo chí dài trong js góc. Tôi tìm thấy giải pháp từ đây https://gist.github.com/BobNisco/9885852 Nhưng tôi không thể đăng nhập trên bảng điều khiển. http://goo.gl/ZpDeFz bạn có thể vui lòng cho tôi biết nơi tôi đang nhận sai ..

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

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

Answer 1

Mã của bạn không hoạt động vì các chỉ thị liên kết với các yếu tố touchstart và touchend sự kiện mà có lẽ bạn đang không sử dụng nếu bạn đang thử nghiệm trong trình duyệt.

Khi tôi đổi chúng thành mousedown và mouseup tập lệnh của bạn hoạt động tốt trên trình duyệt của máy tính.

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

Đó là một thực hiện tốt:

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

Cách sử dụng Ví dụ:

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

Dựa trên: https://gist.github.com/BobNisco/9885852

Answer 3

Đi qua URL dưới đây để biết các chỉ thị góc và các phương pháp thực hiện,

Mã nguồn cho Chỉ thị báo chí dài:

// 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 của bạn nên được như thế này :

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

Bộ điều khiển JS funct ion để làm cho các định nghĩa mà bạn muốn:

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

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

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