I'm currently working with Angular Material.
My goal is to develop a directive that allows me to trigger a right-click event on an element.
This is what I have attempted so far:
JavaScript:
app.directive('rightClick', ["$parse", function($parse) {
return {
restrict: 'A',
link: function($scope, element, attrs) {
var fn = $parse(attrs.rightClick);
element.bind('contextmenu', function(event) {
$scope.$apply(function() {
event.preventDefault();
fn($scope, {$event:event});
});
});
}
}
}])
HTML:
<md-menu md-position-mode="target-right bottom">
<md-button right-click="$mdOpenMenu($event)" aria-label="Open some menu">
Right click
</md-button>
<md-menu-content>
<md-menu-item>
<md-button ng-click="doSomething()" aria-label="Do something">
Action
</md-button>
</md-menu-item>
</md-menu-content>
The issue I am facing is that the menu does not appear in the correct position.
Instead of showing up where I right-clicked, it appears at the top left of the page.
How can I create a directive that mimics the behavior of ng-click but for right-click events and works seamlessly with Angular Material?
UPDATE:
Thank you for your response, Catmandu.
I attempted to implement a similar directive, but unfortunately, it did not resolve the problem.
Here is a visual representation of my issue:
Result using custom "ng-right-click" directive which triggers contextmenu:
Result using AngularJS "ng-click" directive:
With my custom directive, the menu still fails to display in the desired top/left position.