我正在使用 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”指令的结果:
在我的自定义指令中,菜单没有出现在合适的顶部/左侧位置。
最佳答案
您可以使用指令来绑定(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
关于javascript - 将右键单击与 Angular Material 绑定(bind),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36007578/