https://github.com/msarsha/angular-rightclick-contextmenu
Right click context menu for angular 1.5
https://github.com/msarsha/angular-rightclick-contextmenu
angular angularjs click context contextmenu menu right
Last synced: 12 months ago
JSON representation
Right click context menu for angular 1.5
- Host: GitHub
- URL: https://github.com/msarsha/angular-rightclick-contextmenu
- Owner: msarsha
- Created: 2016-07-31T18:30:34.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-03-12T09:57:17.000Z (about 9 years ago)
- Last Synced: 2025-03-18T18:58:09.000Z (12 months ago)
- Topics: angular, angularjs, click, context, contextmenu, menu, right
- Language: JavaScript
- Homepage: https://msarsha.github.io/angular-right-click/
- Size: 43.9 KB
- Stars: 10
- Watchers: 1
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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
````html
Right Click Me
````
### `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:
````javascript
[
{
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/