An AngularJS directive to display a context menu when a right-click event is triggered
Please email me (my email is on my profile page: https://github.com/ianwalter)
This project was built using ng-boilerplate!
Install using Bower:
bower install ng-context-menu --save
Include ng-context-menu.min.js in your app.
var app = angular.module('menu-demo', ['ngRoute', 'ng-context-menu'])
Note that the data-target
attribute value must match the id
of the menu in the next step.
<div context-menu class="panel panel-default position-fixed"
data-target="menu-{{ $index }}"
ng-class="{ 'highlight': highlight, 'expanded' : expanded }">
...
</div>
Customize the menu to your needs. It may look something like:
<div class="dropdown position-fixed" id="menu-{{ $index }}">
<ul class="dropdown-menu" role="menu">
<li>
<a class="pointer" role="menuitem" tabindex="1"
ng-click="panel.highlight = true">
Select Panel {{ $index + 1 }}
</a>
</li>
<li>
<a class="pointer" role="menuitem" tabindex="2"
ng-click="panel.highlight = false">
Deselect Panel {{ $index + 1 }}
</a>
</li>
<li>
<a class="pointer" role="menuitem" tabindex="3"
ng-click="panel.expanded = true">
Expand Panel {{ $index + 1 }}
</a>
</li>
<li>
<a class="pointer" role="menuitem" tabindex="4"
ng-click="panel.expanded = false">
Contract Panel {{ $index + 1 }}
</a>
</li>
<li>
<a class="pointer" role="menuitem" tabindex="5"
ng-click="addPanel()">
Add a panel
</a>
</li>
<li>
<a href="https://github.com/ianwalter/ng-context-menu"
role="menuitem"
tabindex="-1">
ng-context-menu on GitHub
</a>
</li>
</ul>
</div>
As you can see in the demo, I just created a class called position-fixed and added the property:
.position-fixed {
position: fixed;
}
If you need to disable the contextmenu in certain circumstances, you can add an expression to the
context-menu-disabled
attribute. If the expression evaluates to true, the contextmenu will be
disabled, for example, context-menu-disabled="1 === 1"
You can add a callback function to the context-menu
property which will be
called when the menu is opened:
<div context-menu="onShow()">
<!-- ... -->
</div>
Add the following attribute to the context-menu
element: context-menu-close
which should be a function
that will be called whenever the context menu is closed.
<div context-menu context-menu-close="onClose()">
<!-- ... -->
</div>
Add the following attribute to the context-menu
element: context-menu-margin-bottom
to keep the context menu
away from the bottom of the page at least by this attribute value in pixels.
<div context-menu context-menu-margin-bottom="10">
<!-- ... -->
</div>
I hope you find this useful!
⌁ Ian