如何正確放置上下文菜單與角材料？

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> 

希望這是有益:)