javascript - 将右键单击与 Angular Material 绑定(bind)

Question

我正在使用 Angular Material 。

我想创建一个指令，允许我绑定(bind)右键单击元素。

我尝试过这个:

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 方法？

更新:

感谢您的回答 Catmandu。

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

这是我的问题的说明:

带有绑定(bind)上下文菜单的自定义“ng-right-click”指令的结果:

AngularJS“ng-click”指令的结果:

在我的自定义指令中，菜单没有出现在合适的顶部/左侧位置。

Answer 1

您可以使用指令来绑定(bind)右键单击时的特定操作，使用 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});
            });
        });
    };
});

使用直接返回函数并避免使用restrict