Suggestions for coding an ContextMenu with AngularJS - angularjs

Question

I want to code a contextmenu directive for my project. First of all created a sample context menu as an angular JS directive:
var myApp = angular.module('myApp',[]);
myApp.directive("myContextMenu", function(){
restrict: 'AE',
replace: true,
template: "",
link: (scope, elem, attrs) ->
elem.bind "contextmenu", ->
scope.$apply ->
console.log "Right click to an item."
elem.bind "mouseleave", ->
elem.bind 'mouseover', ->
elem.css('cursor', 'pointer');
});
Here is my sample HTML file:
<div ng-app>
<div my-context-menu>
Right click to display a context-menu
</div>
</div>
When I right click to the text, I want to append some div(for ex. Sample Context Menu). When the mouse leaves the div I want the Sample Context Menu to be removed.
What is the right approach for that. Should I fill the "template" field of the directive? Should I hide and show the context menu? Or should I add and remove the context menu?
Any kind of help is kindly appreciated?
Regards.

Answer 1

Have a look at this project https://github.com/ianwalter/ng-context-menu
In my opinion the important thing is how you define the context menu and good example to think about it is ng-repeat (this way you will have to think about scope a bit more)
I think that defining menu inline would be quite clean
i.e
<my-context-menu>
<ul>
<li>
<a ng-click="f()">Option 1</a>
</li>
<li>
<a ng-click="f()">Option 2</a>
</li>
</ul>
</my-context-menu>
this way directive would be concerned only how the menu is displayed and the content would be defined inline and you could easily call function in current scope
I find showing / hiding div would good enough - maybe when u have huge number of items in page and different context menus creating div on the fly would be more suitable

Answer 2

I would use a more generic approach and make reusable to various controllers. Think about configurable option for adding items to menus. What methods would be called by clicking that item - make this also customizable.
Also the positioning of context menu, if menu oepned at right corner and gets hidden within window - have detection at place to shift the menu to left.
You can check the one I have written - https://github.com/shekhardesigner/Context-Menu-Angular-Directive