How to correctly place context menu with Angular Material?

Question

this is my menu:

<md-menu>
    <div flex class="mbpTable" ng-right-click="$mdOpenMenu($event)">{{tab.title}}</div>
<md-menu-content>
   <md-menu-item>
      <md-button ng-click="">Alert</md-button>
   </md-menu-item>
 </md-menu-content>
</md-menu>

As you can see, I defined a custom directive to make it show the menu on right click:

angular.module("ngRightClick",[]).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});

        });
    });
};

})

The problem is that menu appears always on the top left of the page, no matter where I click (consider that the previous HTML is inside a navbar with several options). How can I make$mdOpenMenu consider $event.clientX and $event.clientY values while opening the menu using the right click?

Thanks

Founded1898 · Accepted Answer · 2016-12-15 17:20:55Z

Had the same Problem some days ago. Unfortunately, can't find the link anymore to the original post. Anyway, you can add a custom directive for this:

app.directive('contextMenu', [function() {
  return {
    restrict: 'A',
    require: 'mdMenu',
    link: function(scope, element, attrs, menu){

      var prev = { x: 0, y: 0 };
      scope.$mdOpenContextMenu = function (event) {

        menu.offsets = function () {
          var mouse = {
            x: event.clientX,
            y: event.clientY
          };
          var offsets = {
            left: mouse.x - prev.x,
            top: mouse.y - prev.y
          };
          prev = mouse;

          return offsets;
        };

        menu.open(event);
      };
    }
  };
}]);

Usage:

<md-menu context-menu>
  <div ng-click="" ng-right-click="$mdOpenContextMenu($event)">
    some Content
 </div>

 <md-menu-content id="menu">
     <md-menu-item>
         <md-button>Action</md-button>
     </md-menu-item>
 </md-menu-content>
</md-menu>

Hope this is helpful :)

Collectives™ on Stack Overflow

How to correctly place context menu with Angular Material?

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related