An AngularJS directive to display a context menu when a right-click event is triggered.


Angular Core Dependency: >= 1.2.5

Module License: MIT

Added by: Sam Deering





Stars: 0

Watchers: 0

Forks: 0


Ian Walter
Ian Walter

Module Description


An AngularJS directive to display a context menu when a right-click event is triggered

Code Climate

Codeship Status for ianwalter/ng-boilerplate

This project was built using ng-boilerplate!

Step 1: Install ng-context-menu

Install using Bower:

bower install ng-context-menu --save

Include ng-context-menu.min.js in your app.

Step 2: Load the ng-context-menu module

var app = angular.module('menu-demo', ['ngRoute', 'ng-context-menu'])

Step 3: Add the context-menu directive to a DOM element

<div context-menu class="panel panel-default position-fixed"
     data-target="menu-{{ $index }}"
     ng-class="{ 'highlight': highlight, 'expanded' : expanded }">

Step 4: Add the markup of the menu you want to be displayed

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">
      <a class="pointer" role="menuitem" tabindex="1"
         ng-click="panel.highlight = true">
         Select Panel {{ $index + 1 }}
      <a class="pointer" role="menuitem" tabindex="2"
         ng-click="panel.highlight = false">
         Deselect Panel  {{ $index + 1 }}
      <a class="pointer" role="menuitem" tabindex="3"
         ng-click="panel.expanded = true">
         Expand Panel {{ $index + 1 }}
      <a class="pointer" role="menuitem" tabindex="4"
         ng-click="panel.expanded = false">
         Contract Panel {{ $index + 1 }}
      <a class="pointer" role="menuitem" tabindex="5"
         Add a panel
      <a href=""
         ng-context-menu on GitHub

Step 5: Make sure your menu is has the position: fixed CSS property

As you can see in the demo, I just created a class called position-fixed and added the property:

.position-fixed {
  position: fixed;

Disabling the contextmenu

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"

Open callback

You can add a callback function to the context-menu property which will be called when the menu is opened:

<div context-menu="onShow()">
<!-- ... -->

Close callback

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()">
<!-- ... -->

I hope you find this useful!

Module stats last updated: 2016-01-31 15:00:02

Disclaimer: Some data on this page may have been gathered from the authors GitHub respository. If you see any mistakes or outdated information please let us know. Thanks!