Expired Queues
Published since 2009 Core-CSS.net → CSSJunction.com → Expired Queues Web development

Written in June 2015. Much of what it describes has since changed or disappeared; it is kept as a record of how the web used to work, not as advice.

AngularJSpostsdom

Context Menu using AngularJS Directive

18 June 2015 By Adrian 3 min read

Since SPAs have emerged a lot in the Web application market, creating MVC applications using Angular JS has become a mainstream trend.

Here is something reusable for your Angular JS Application to speed up your development - a context menu directive.

Check it out: Custom Context Menu Angular JS Directive/

How to use?

This directive is as simple as it could be. Plug the directive javascripts to your module.  Next assign the attribute to any HTML element.


<button context-menu>Show Options</button>

There is one required attribute 'menu-items' to pass your menu items.  This menu item has to be an Array of objects in your current scope with three properties. Example:


    //Menu Items Array
    $scope.menus = [
      {label: 'View',   action: 'callView',   active: true},
      {label: 'Delete', action: 'deleteItem', active: true},
      {label: 'Send',   action: 'sendItem',   active: false},
      {label: 'Share',  action: '',           active: true},
      {label: 'Active', action: 'deactivate', active: false}
    ];

Object structure:

  • label: Text to show on Menu item
  • action: This is the method, that would be executed when clicked on a particular item.
  • active: A boolean to toggle the disable/enable of a particular item from the menu. It doesn't hide though.

This array has to be accessible where the current context menu is being applied.  Then use that 'menu-items' attribute to pass the array reference:


<button context-menu menu-items="menus">Show Options</button>

And now it's time to define your functions, these functions have to be within your scope chain and be accessible to be executed within scope.


    $scope.deleteItem = function(arg){
      console.warn('deleted ...')
    };

    $scope.callView = function(arg){
      console.info('View Call, another method')
    };

That's all. You have a working context menu. Any time a user right clicks within that element range - the context menu shows up.

Other Options

There are other features, optional to use.

  • Fix pointer for opening context menu

If you wish your context menu to open always from a certain point, not where the user has right clicked (cursor position) then all you gotta do is specify a pointer. For that you need a child element with your directive. Pass that element reference using pointer-node attribute. Example:


     <button context-menu menu-items="menus" pointer-node=".showHere">Show Options <span class="showHere">&gt;</span></button>

I recommend using a class selector to pass the reference to directive as I have done above.

Context Menu Behaviour

Once the element is clicked, a dropdown context menu pops down right below it. But this context menu is space sensitive. What I mean by that is, by default the menu tries to open on bottom right side of the element but if for some reason the menu detects that it might go outside of the window then menu will automatically reposition itself on either top left, top right, left top, left bottom. Hence when the menu appears it would never be hidden in the browser. How do you like that :P?

Full Code

Source Code is available on GitHub:  https://github.com/expiredqueues/Context-Menu-Angular-Directive

Similar posts