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.
varapp=angular.module('menu-demo',['ngRoute','ng-context-menu'])<divcontext-menuclass="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:
<divclass="dropdown position-fixed" id="menu-{{$index }}"><ulclass="dropdown-menu" role="menu"><li><aclass="pointer" role="menuitem" tabindex="1" ng-click="panel.highlight = true"> Select Panel{{$index + 1 }} </a></li><li><aclass="pointer" role="menuitem" tabindex="2" ng-click="panel.highlight = false"> Deselect Panel{{$index + 1 }} </a></li><li><aclass="pointer" role="menuitem" tabindex="3" ng-click="panel.expanded = true"> Expand Panel{{$index + 1 }} </a></li><li><aclass="pointer" role="menuitem" tabindex="4" ng-click="panel.expanded = false"> Contract Panel{{$index + 1 }} </a></li><li><aclass="pointer" role="menuitem" tabindex="5" ng-click="addPanel()"> Add a panel </a></li><li><ahref="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:
<divcontext-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.
<divcontext-menucontext-menu-close="onClose()"><!-- ... --></div>I hope you find this useful!
⌁ Ian