自定义右键事件:
app.directive('ngRightClick',function($parse){
return function (scope,element,attrs){
var fn = $parse(attrs.ngRightClick);
element.bind('contextmenu',function(event){
event.preventDefault();
fn(scope,{$event:event});
})
}
})
前台页面可以触发事件了:
<div>
<span ng-right-click="meau()">右击我哦</span>
</div>
<div ng-show="isShow" ng-style="menuPosition" ng-right-click="cancelRight()">
<ul>
<li class="type-add">新增</li>
<li class="type-detele">删除</li>
<li class="type-updata">修改</li>
</ul>
</div>
后台JS代码:
$scope.isShow = false;
$scope.meau = function(element){
var e = element || window.event;
$scope.menuPosition = {
top:e.clientY+"px",
left:e.clientX+"px",
position:"fixed"
};
$scope.safeApply();
$scope.isShow = !$scope.isShow;
}
$scope.cancelRight = function(){
window.event.returnValue = false;
return false;
}
以上代码所实现的是右键出现有定位效果“新增”“删除”“修改”的菜单,并取消页面右键菜单。