Context Manu AngularJS Directive

http://angularjs.org/

by Yaprak Ayazoğlu

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.min.js"></script>
<div ng-controller="MainCtrl">
    <div context-menu="myContextDiv"> Right Click On the Item!
    </div>
</div>

CSS

#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;
}

JavaScript

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;
});