Angular Materialでコンテキストメニューを正しく配置する方法は？

Question

これは私のメニューです：

<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> 

あなたが見ることができるように、私はそれを右クリックでメニューを表示させるために、カスタムディレクティブを定義した：

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}); 

     }); 
    }); 
}; 

}）

問題がされそのメニューはページの左上に常に表示されます（クリックする場所に関係なく）。前のHTMLはいくつかのオプションがあるナビゲーションバーにあります。右クリックでメニューを開くときに$mdOpenMenuを$event.clientXと$event.clientYの値にするにはどうすればよいですか？

ありがとうございました

Answer 1

数日前に同じ問題がありました。残念ながら、もはや元の投稿へのリンクを見つけることができません。とにかく、あなたはこのためのカスタムディレクティブを追加することができます。

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); 
     }; 
    } 
    }; 
}]); 

は使用方法：

<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> 

希望を、これは便利です:)