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

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

options (v0.0.4)

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 labelonClick: function($event){// on click handler}},{label: 'Edit',onClick: function($event){// on click handler},disabled: function(dataContext){// disabled handlerreturntrue;}},{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/