Come faccio a gestire clic destro eventi angular.js?

C’è un modo per avere un elemento in modo che si esegue un’azione sulla sinistra-clic (ng-click) e poi un’altra azione sul pulsante destro del mouse?

Adesso ho qualcosa di simile:

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

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

InformationsquelleAutor infomofo | 2013-03-31



4 Replies
  1. 137

    È possibile utilizzare una direttiva per associare specifici azione sulla destra clic, utilizzando il contextmenu evento :

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

    Esempio di codice fiddle

    • Questo funziona alla grande, ma se cerco di aprire una nuova finestra del conduttore, quest’ultimo viene bloccato quando viene attivato con il tasto destro e non quando attivato dal tasto sinistro del mouse. Io sono su chrome. jsfiddle.net/aslakhellesoy/QLHUV/3
    • Probabilmente perché il browser non riconosce più il ng clic con il pulsante destro direttiva come un utente ha avviato evento.
    • Per me funziona in Chrome (versione 34.0.1847.116 m)
    • Questo è cool. Se volevo passare argomenti della funzione (ad esempio, quando decrement() è chiamato, ho voluto anche per registrare le coordinate x e y del mouse) – come posso fare questo?
    • si può avere accesso all’evento con $evento, ecco un esempio: jsfiddle.net/b0sx1ae1
    • Grande risposta, anche se io preferisco chiamarlo ngContextmenu (anche modificare attrs.ngContextmenu e utilizzare come ng-contextmenu="...") perché gestisce il contextmenu, e non con un clic destro, che dovrebbe essere gestito da ng-mousedown, ng-mouseup e ng-click.
    • Sto avendo problemi con ng-click essere anche chiamato per fare. La soluzione è abbastanza semplice… non riesco a capire perché funziona su giocherellare con incremento/decremento funzioni, ma non con le mie funzioni. Qualche suggerimento? Non c’è molto da incollare, ci sono solo due funzioni con console.log chiamate.

  2. 26

    Ciao questa è una vecchia questione, ma ho una soluzione che penso possa essere più semplice, in alcuni casi. Il ngMousedown (e ngMouseup) direttive che si sono attivati con il pulsante destro del mouse e accedere all’originale evento del mouse attraverso $event così si potrebbe fare in questo modo:

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

    Quindi il 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;
        }
    }

    Qui è un lavoro violino. Funziona lo stesso accettato di rispondere, ma non richiede la creazione di una nuova direttiva. Anche se una direttiva può essere una soluzione migliore, soprattutto se si prevede di collegare le funzioni di clic destro a un sacco di cose. Ma comunque, un’altra opzione.

    • Molto bello, grazie. Per tutti coloro che hanno problemi con esso, il oncontextmenu attributo deve essere esattamente a destra elemento selezionato. Avuto il contenitore e il menu di contesto continuava ad aprire. (Chrome 51.0.2700.0 dev-m)
    • per me funziona con il oncontextmenu sul contenitore. chrome versione : 54.0.2840.71
    • Appena provato con il mio attuale versione (53.0.2785.143 m) con lo stesso contenitore che ho usato nel mese di aprile. E sì, funziona. Sembra che si trattava di un bug nella versione che ho usato prima.
  3. 7

    Un modo mediante una direttiva che lega un gestore di eventi per contextmenu evento. Ho avuto il tempo duro arresto bolle per evitare default menu per mostrare così aggiunto nativo gestore di script per document. Provato con e.stopPropagation(), e.preventDefault() , return false etc . Il controllo per la destinazione nel documento gestore 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

  4. 1

    È possibile utilizzare questo direttiva.

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

Lascia un commento