ng-simple-contextmenu demo - JSFiddle - JSFiddle - JSFiddle
HTML
<div ng-app="demo-app">
<div ng-controller="DemoController">
<div class="info" ng-class="bgColor">
This is an awesome element.<br />
Right click to change background color.
<context-menu class="my-contextmenu">
<a ng-hide="bgColor === 'white'" ng-click="toWhite()">White</a>
<a ng-hide="bgColor === 'blue'" ng-click="toBlue()">Blue</a>
<a ng-hide="bgColor === 'red'" ng-click="toRed()">Red</a>
</context-menu>
</div>
</div>
</div>
CSS
.info {
margin: 20px;
padding: 10px;
}
.info.white {
background: white;
}
.info.blue {
background: blue;
color: white;
}
.info.red {
background: red;
}
.my-contextmenu {
width: 200px;
background: white;
border: solid thin #eee;
}
.my-contextmenu a {
display: block;
border-bottom: solid thin #eee;
padding: 5px 10px;
}
.my-contextmenu a:last-child {
border-bottom: none;
}
.my-contextmenu a:hover {
background: #e9e9e9;
}
JavaScript
angular.module("ngSimpleContextMenu",[]).directive("contextMenu",function(){return{controller:angular.noop,link:function(n,e,t,o){function i(n){d.css({display:"block"});var e=window.innerWidth,t=window.innerHeight,o=d[0].offsetWidth,i=d[0].offsetHeight;n.left+o>e&&(n.left-=o),n.top+i>t&&(n.top-=i),d.css({top:n.top+"px",left:n.left+"px"}),p(),setTimeout(function(){f()},10)}function c(){d.css({display:"none"}),u(),setTimeout(function(){l()},10)}function f(){m.one("click",s),m.one("contextmenu",s)}function u(){m.off("click",s),m.off("contextmenu",s)}function l(){a.one("contextmenu",r)}function p(){a.off("contextmenu",r)}function s(n){n.preventDefault(),c()}function r(n){n.preventDefault(),i({top:n.clientY,left:n.clientX})}var d=e,a=d.parent(),m=angular.element(document.body);n.$on("$destroy",function(){d.remove(),p(),u()}),m.append(d),d.css({position:"fixed",zIndex:"1000",display:"none",top:0,left:0}),l(),o.showMenu=i,o.hideMenu=c}}});
angular.module("demo-app", ["ngSimpleContextMenu"]).controller("DemoController", [
"$scope",
function ($scope) {
$scope.bgColor = "white";
$scope.toWhite = function () { $scope.bgColor = "white"; };
$scope.toBlue = function () { $scope.bgColor = "blue"; };
$scope.toRed = function () { $scope.bgColor = "red"; };
}
]);