使用 Angular Material 绑定右键单击答案

【问题标题】：Bind right click with Angular Material使用 Angular Material 绑定右键单击
【发布时间】：2016-03-15 09:42:52
【问题描述】：

我正在使用 Angular 材质。

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

我试过了：

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。

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

这是我的问题的说明：

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

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

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

【问题讨论】：

标签： javascript angularjs angularjs-directive material-design angular-material

【解决方案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});
            });
        });
    };
});

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

【讨论】：