右键单击Angular Material

Question

我正在使用Angular Material。

我想创建一个允许我绑定元素右键的指令。

我试过了：

JS：

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>

问题是菜单没有出现在好位置。

实际上，位置位于页面的左上角，而不是我点击的元素。

如何创建指令以完成与 ng-click 完全相同的操作，但右键单击并允许我使用Angular Material方法？

UPDATE：

感谢你的回答Catmandu。

我创建了一个类似的指令，但它仍然不起作用。

以下是我的问题的说明：

自定义＆＃34; ng-right-click＆＃34;绑定contextmenu的指令：

AngularJS＆＃34; ng-click＆＃34;的结果指令：

在我的自定义指令上，菜单不会显示在良好的上/左位置。

Answer 1

您可以使用contextmenu事件使用指令在右键单击时绑定特定操作：

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

使用直接返回功能并避免使用限制