是否有办法设置元素,以便左键单击(ng-click)执行一个操作,然后右键单击另一个操作?
现在我有类似的东西:
<span ng-click="increment()">{{getPointsSpent()}}</span>
我还想能够右键单击跨度来执行函数递减();
答案 0 :(得分:134)
您可以使用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});
});
});
};
});
答案 1 :(得分:25)
嗨,这是一个老问题,但我认为在某些情况下我认为可能更简单。 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。它的工作原理与接受的答案相同,但并不需要创建一个全新的指令。虽然指令可能是更好的解决方案,特别是如果您计划将右键单击功能附加到很多东西上。但无论如何,另一种选择。
答案 2 :(得分:7)
一种方法是使用将事件处理程序绑定到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>
答案 3 :(得分:1)
您可以使用此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>