title: Suggestions for coding an ContextMenu with AngularJS
body: <p>I want to code a contextmenu directive for my project. First of all created a sample context menu as an angular JS directive:</p>
  
  <pre><code>var myApp = angular.module('myApp',[]);
  
  myApp.directive("myContextMenu", function(){
    restrict: 'AE',
    replace: true,
    template: "",
    link: (scope, elem, attrs) -&gt;
      elem.bind "contextmenu", -&gt;
        scope.$apply -&gt;
          console.log "Right click to an item."
      elem.bind "mouseleave", -&gt;
      elem.bind 'mouseover', -&gt;
        elem.css('cursor', 'pointer');
  });
  </code></pre>
  
  <p>Here is my sample HTML file:</p>
  
  <pre><code>&lt;div ng-app&gt;
    &lt;div my-context-menu&gt;
      Right click to display a context-menu
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>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?</p>
  
  <p>Any kind of help is kindly appreciated?</p>
  
  <p>Regards.</p>