var myApp = angular.module("myApp",[]);
myApp.controller( "MainCtrl", [ "$scope", function($scope) {
console.log("Main Controller loaded.");
$scope.myContextDiv = "<ul id='contextmenu-node'><li class='contextmenu-item' ng-click='clickedItem1()'> Item 1 </li><li class='contextmenu-item' ng-click='clickedItem2()'> Item 2 </li></ul>";
$scope.clickedItem1 = function(){
console.log("Clicked item 1.");
};
$scope.clickedItem2 = function(){
console.log("Clicked item 2.");
};
}]);
myApp.directive( "contextMenu", function($compile){
contextMenu = {};
contextMenu.restrict = "AE";
contextMenu.link = function( lScope, lElem, lAttr ){
lElem.on("contextmenu", function (e) {
e.preventDefault(); // default context menu is disabled
// The customized context menu is defined in the main controller. To function the ng-click functions the, contextmenu HTML should be compiled.
lElem.append( $compile( lScope[ lAttr.contextMenu ])(lScope) );
// The location of the context menu is defined on the click position and the click position is catched by the right click event.
$("#contextmenu-node").css("left", e.clientX);
$("#contextmenu-node").css("top", e.clientY);
});
lElem.on("mouseleave", function(e){
console.log("Leaved the div");
// on mouse leave, the context menu is removed.
if($("#contextmenu-node") )
$("#contextmenu-node").remove();
});
};
return contextMenu;
});
<div ng-controller="MainCtrl">
<div context-menu="myContextDiv"> Right Click On the Item!
</div>
</div>
#contextmenu-node{
position: absolute;
background-color: white;
border: solid #CCCCCC 1px;
}
.contextmenu-item{
margin: 0.5em;
padding-left: 0.5em;
}
.contextmenu-item:hover{
background-color: #CCCCCC;
cursor: default;
}
External resources loaded into this fiddle: