Есть ли способ установить элемент таким образом, чтобы он выполнял одно действие по щелчку левой кнопкой мыши (ng-click), а затем другое действие с помощью щелчка правой кнопкой мыши?
Сейчас у меня есть что-то вроде:
<span ng-click="increment()">{{getPointsSpent()}}</span>
И я хотел бы также иметь возможность щелкнуть правой кнопкой мыши по диапазону, чтобы выполнить функцию decment();
Вы можете использовать директиву для привязки определенного действия при щелчке правой кнопкой мыши, используя событие 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});
});
});
};
});
Привет, это старый вопрос, но у меня есть решение, которое, по моему мнению, может быть проще в некоторых случаях. Директивы 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;
}
}
Вот рабочая скрипка. Он работает так же, как и принятый ответ, но не требует создания совершенно новой директивы. Хотя директива может быть лучшим решением, особенно если вы планируете прикрепить функции правого щелчка к множеству вещей. Но в любом случае другой вариант.
Один из способов - использовать директиву, которая привязывает обработчик события к событию contextmenu. Мне было трудно остановить пузырьки, чтобы предотвратить появление меню по умолчанию, поэтому добавлен собственный обработчик script для 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>
Вы можете использовать эту директиву .
<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>
попробуйте это
HTML
<div ng-app="sampleApp" ng-controller="AppCtrl ">
<div>
<a href="#"
prevent-right-click>Click Me
</a>
</div>
</div>
Angular
var app = angular.module("sampleApp", []);
app.controller("AppCtrl", function($scope) {
console.log('called');
})
app.directive('preventRightClick', [
function() {
return {
restrict: 'A',
link: function($scope, $ele) {
$ele.bind("contextmenu", function(e) {
e.preventDefault();
});
}
};
}
])