Skip to content

Instantly share code, notes, and snippets.

@rlfrahm

rlfrahm/README.md

Last active August 29, 2015 14:10
Show Gist options
  • Save rlfrahm/1b680fbed305263e4ce1 to your computer and use it in GitHub Desktop.
Save rlfrahm/1b680fbed305263e4ce1 to your computer and use it in GitHub Desktop.
Download ZIP
A custom context menu using AngularJs and Bootstrap
Raw
README.md

AngularJS : An example of a custom context menu.

Right click in the window to view.

Raw
app.js
angular.module('app',[])
.controller('ContextMenuCtrl',['$scope', '$document', function($scope,$document) {
$scope.contextmenu = {show:false};
$document.on('contextmenu', function(e) {
e.preventDefault();
console.log(e);
$scope.contextmenu.style = {
left: e.clientX + 'px',
top: e.clientY + 'px',
display: 'block'
};
$scope.contextmenu.show = true;
if(!$scope.$$phase) {
$scope.$apply();
}
});
}]);
Raw
index.html
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script src="app.js"></script>
<body ng-app="app" ng-controller="ContextMenuCtrl">
<ul class="dropdown-menu" role="menu" ng-style="contextmenu.style" ng-if="contextmenu.show">
<li><a href="" ng-click="contextmenu.show=false">Action</a></li>
<li><a href="" ng-click="contextmenu.show=false">Another action</a></li>
<li><a href="" ng-click="contextmenu.show=false">Something else here</a></li>
<li class="divider"></li>
<li><a href="" ng-click="contextmenu.show=false">Separated link</a></li>
<div class="overlay" ng-click="contextmenu.show=false"></div>
</ul>
<style>
.overlay {
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
z-index:-1;
}
</style>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment