Comment gérer les événements de clic droit dans angular.js ?

Question

Existe-t-il un moyen de configurer un élément de manière à ce qu'il exécute une action en cas de clic gauche (ng-click), puis une autre action en cas de clic droit ?

Pour l'instant, j'ai quelque chose comme :

<span ng-click="increment()">{{getPointsSpent()}}</span>

Et j'aimerais aussi pouvoir faire un clic droit sur l'étendue pour exécuter la fonction decrement() ;

Answer 1

Vous pouvez utiliser une directive pour lier une action spécifique au clic droit, en utilisant la directive contextmenu événement :

app.directive('ngRightClick', function($parse) {
    return function(scope, element, attrs) {
        var fn = $parse(attrs.ngRightClick);
        element.bind('contextmenu', function(event) {
            scope.$apply(function() {
                event.preventDefault();
                fn(scope, {$event:event});
            });
        });
    };
});

Exemple de code sur le violon

Answer 2

Bonjour, c'est une vieille question mais j'ai une solution qui, je pense, peut être plus simple dans certains cas. Les directives ngMousedown (et ngMouseup) sont déclenchées par le bouton droit de la souris et ont accès à l'événement original de la souris par le biais de $event donc vous pourriez le faire de cette façon :

<span ng-mousedown="handleClick($event)"
      oncontextmenu="return false">  <!-- use this to prevent context menu -->
          {{getPointsSpent()}}
</span>

Ensuite, dans le contrôleur, vous pouvez faire ce qui suit :

$scope.handleClick(evt) {
    switch(evt.which) {
        case 1:
            increment(); // this is left click
            break;
        case 2:
            // in case you need some middle click things
            break;
        case 3:
            decrement(); // this is right click
            break;
        default:
            alert("you have a strange mouse!");
            break;
    }
}

Voici un violon de travail . Elle fonctionne de la même manière que la réponse acceptée, mais ne nécessite pas la création d'une toute nouvelle directive. Bien qu'une directive puisse être une meilleure solution, surtout si vous prévoyez d'attacher des fonctions de clic droit à de nombreux éléments. Mais quoi qu'il en soit, une autre option.

Answer 3

L'une des méthodes consiste à utiliser une directive qui lie un gestionnaire d'événements à l'adresse suivante contextmenu événement. J'ai eu du mal à arrêter les bulles pour empêcher le menu par défaut de s'afficher. J'ai donc ajouté un gestionnaire natif script pour l'évènement document . Essayé avec e.stopPropagation() , e.preventDefault() , return false etc . La vérification de la cible dans le gestionnaire de documents semble bien fonctionner.

app.directive('rightClick',function(){
    document.oncontextmenu = function (e) {
       if(e.target.hasAttribute('right-click')) {
           return false;
       }
    };
    return function(scope,el,attrs){
        el.bind('contextmenu',function(e){
            alert(attrs.alert);               
        }) ;
    }
});

<button right-click alert="You right clciked me">Right click me</button>

DEMO http://plnkr.co/edit/k0TF49GVdlhMuioSHW7i

Answer 4

Vous pouvez utiliser ce directive .

<div ng-controller="demoCtrl" save-content="classic-html">
  <div contextmenu="{{lists}}" class="box" click-menu="clickMenu(item)" right-click="rightClick($event)">
    <span>normal dropmenu</span>
  </div>
</div>

<script type="text/javascript">
angular.module('demo', ['ngContextMenu'])

  .controller('demoCtrl', ['$scope', function($scope) {
    $scope.lists = [{
      name: '11'
    }, {
      name: '22'
    }]

    $scope.clickMenu = function (item) {
      console.log(item);
    };

    $scope.rightClick = function (event) {
      console.log(event);
    };
  }])
</script>