angular-rightclick-contextmenu

Right click context menu for angular 1.5

DEMO: https://msarsha.github.io/angular-right-click/

Installation

• npm install --save right-click-menu

Build

Clone the repo and run npm install to install dependencies and then gulp to build;

How to use:

• Add the sh-context-menu directive to the element you wish to enable the context menu functionality.
• Provide a options array that will contain the context menu objects using the menu-options binding.
• Provide a data context object using the context-data binding.
• Optionally provide a options object

<div sh-context-menu menu-options="ctrl.menuOptions" context-data="ctrl.data" options="ctrl.options">Right Click Me</div>

options

options should be a key\value object

Supported options:

rtl: boolen -> Right to left support

menu-options

menu-options should be an Array with the following structure:

[
    {
        label: 'Save',        // menu option label
        onClick: function($event){  // on click handler
        }   
    },
    {
        label: 'Edit',
        onClick: function($event){  // on click handler
        },
        disabled: function (dataContext) { // disabled handler
            return true;
        }
      },
      {
        label: 'Details',
        onClick: function($event){  // on click handler
        }   
      },
      {
        divider: true       // will render a divider
      },
      {
        label: 'Remove',
        onClick: function($event){  // on click handler
        }   
      }
  ]

The onClick handler

The onClick handler is a function with $event parameter.

The $event object will contain the following parameters:

• option object that contain the option the user pressed
• dataContext object that was injected using the context-data binding

The disabled handler

The disabled handler is a function with dataContext parameter.

This handler will be injected with the dataContext provided using the context-data binding and will return true/false to disable the current menu option for the current dataContext

context-data

The context-data object will be injected into the onClick and disabled handlers.

Examples:

Example can be found under example/

And live demo here: https://msarsha.github.io/angular-right-click/