Come gestisco gli eventi del clic con il tasto destro in angular.js?

Question

C'è un modo per impostare un elemento in modo che esegua un'azione con il tasto sinistro del mouse (ng-clic) e poi un'altra azione su un tasto destro del mouse?

In questo momento ho qualcosa di simile:

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

E mi piacerebbe essere anche in grado di fare clic destro sul lasso di svolgere la funzione di decremento();

Answer 1

È possibile utilizzare una direttiva per associare un'azione specifica sul tasto destro del mouse, utilizzando l'evento contextmenu:

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

Code example on fiddle

Answer 2

Un modo è utilizzare una direttiva che associa un gestore eventi all'evento contextmenu. Ho avuto difficoltà a fermare il bubbling per evitare che il menu predefinito venisse visualizzato in modo tale che il gestore di script nativo fosse aggiunto per document. Provato con e.stopPropagation(), e.preventDefault(), return false ecc. Verifica del bersaglio in gestore documento sembra funzionare bene

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 3

Tu può usare questo directive.

Answer 4

Ciao questa è una vecchia domanda ma ho una soluzione che a mio avviso potrebbe essere più semplice in alcuni casi. Le direttive ngMousedown (e ngMouseup) sono innescato dal tasto destro del mouse e avere accesso alla manifestazione originale del mouse attraverso $event in modo che si possa fare in questo modo:

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

Poi nel controller, è possibile effettuare le seguenti operazioni:

$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; 
    } 
} 

Ecco un working fiddle. Funziona allo stesso modo della risposta accettata ma non richiede la creazione di una direttiva completamente nuova. Anche se una direttiva può essere una soluzione migliore, soprattutto se si prevede di allegare funzioni di clic con il pulsante destro a un sacco di cose. Ma comunque, un'altra opzione.