An AngularJS directive to display a context menu when a right-click event is triggered
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'])
<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"
That's it, I hope you find this useful!
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="onShow()" context-menu-close="onClose()"></div>
«–– Ian