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 ng-contextmenu>Right Click On the Item!
        <ul id="contextmenu-node" ng-show="isVisible">
            <li>Item 1</li>
            <li>Item 2</li>
        </ul>
    </div>
</div>

CSS

#contextmenu-node {
    position: absolute;
}

JavaScript

var myApp = angular.module("myApp", []);

myApp.controller("MainCtrl", ["$scope", function ($scope) {
    console.log("Main Controller loaded.");
    $scope.isVisible = false;
    $scope.$watch('isVisible', function (a) {
        console.log(a);
    })
}]);

myApp.directive("ngContextmenu", function () {
    contextMenu = {};
    contextMenu.restrict = "AE";
    contextMenu.scope = {
        "isVisible": "="
    };
    contextMenu.link = function (lScope, lElem, lAttr) {

        lElem.on("contextmenu", function (e) {
            e.preventDefault();
            console.log("Element right clicked.");
            lScope.$apply(function () {
                lScope.$parent.isVisible = true;
            });

        });
        lElem.on("mouseleave", function (e) {
            console.log("Leaved the div");
            lScope.$apply(function () {
                lScope.$parent.isVisible = false;
            });
        });
    };
    return contextMenu;
});