Is there a way to have an element set up so that it performs one action on left-click (ng-click) and then another action on a right-click?
Right now I have something like:
<span ng-click="increment()">{{getPointsSpent()}}</span>
And I'd like to also be able to right click on the span to perform the function decrement();
You can use a directive to bind specific action on right click, using the contextmenu event :
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});
});
});
};
});
One way is using a directive that binds an event handler to contextmenu event. I had hard time stopping bubbling to prevent default menu to show up so added native script handler for document. Tried with e.stopPropagation(), e.preventDefault() , return false etc . Checking for target in document handler seems to work well
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>
You can use this 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>