Как обрабатывать события щелчка правой кнопкой мыши в angular.js?

Question

Есть ли способ создать элемент, чтобы он выполнял одно действие по щелчку левой кнопкой мыши (ng-click), а затем еще одно действие правой кнопкой мыши?

Сейчас у меня есть что-то вроде:

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

И я хотел бы также иметь возможность щелкнуть правой кнопкой мыши на пролете, чтобы выполнить функцию декремент();

Answer 1

Вы можете использовать директиву, чтобы связать конкретные действия на правой кнопкой мыши, используя 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

Один из способов - использовать директиву, которая связывает обработчик события с событием contextmenu. Мне было трудно остановить пузырьки, чтобы предотвратить появление меню по умолчанию, поэтому добавлен собственный обработчик сценариев для document. Пробовал с e.stopPropagation(), e.preventDefault(), return false и т.д. Проверка целевого в податчик, кажется, работает хорошо

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

Вы может использовать это 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> 

Answer 4

Привет, это старый вопрос, но у меня есть решение, которое, я думаю, может быть проще в некоторых случаях. Директивы ngMousedown (и ngMouseup) вызываются правой кнопкой мыши и иметь доступ к исходному событию мыши через $event так что вы могли бы сделать это следующим образом:

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

Затем в контроллере, вы можете сделать следующее:

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

Вот working fiddle. Он работает так же, как и принятый ответ, но не требует создания совершенно новой директивы. Хотя директива может быть лучшим решением, особенно если вы планируете прикрепить функции правого щелчка к множеству вещей. Но в любом случае, другой вариант.