title: Making a custom contextmenu in AngularJs
body: <p>I am basically wanting to make a right click menu which will record comments on the clicked element. How do I make a contextmenu which closes when I click anywhere else except when I click on the contextmenu elements. With the code I have, even on click the elements which are of the contextmenu, it closes. </p>
  
  <pre><code>&lt;div prevent-right-click visible="isVisible"&gt;
      asd
  &lt;/div&gt;
  
  
  &lt;div ng-if="isVisible"&gt;
      &lt;div class="btn-group-vertical" role="group" aria-label="Vertical button group"&gt; 
          &lt;button type="button" class="btn btn-default"&gt;Button&lt;/button&gt; 
          &lt;button type="button" class="btn btn-default"&gt;Button&lt;/button&gt; 
          &lt;div class="btn-group" role="group"&gt; 
              &lt;button id="btnGroupVerticalDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt; Dropdown &lt;span class="caret"&gt;&lt;/span&gt; &lt;/button&gt; 
              &lt;div class="dropdown-menu pull-left newdropdown" aria-labelledby="btnGroupVerticalDrop1"&gt; 
                  &lt;form&gt;
                      &lt;input type="text" placeholder="Enter name"&gt; &lt;br&gt;
                      &lt;input type="text" placeholder="Enter comment"&gt;
                  &lt;/form&gt;
              &lt;/div&gt; 
          &lt;/div&gt; 
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is my AngularJs code</p>
  
  <pre><code>    app.controller('mainCtrl', function($scope, $http, $timeout, $interval, $log){
      $scope.isVisible = false;
      $scope.$watch('isVisible', function(){
          $log.log($scope.isVisible)
      })
  }); 
  
  app.directive('preventRightClick', function() {
      return {
          restrict: 'A',
          scope: {
              visible: '='
          },
          link: function($scope, $ele) {
              $ele.bind("contextmenu", function(e) {
                  e.preventDefault();
                  $scope.$apply(function () {
                      $scope.visible = true;
                  })
              });
  
              $(document).on('click', '*', function (event) {
                  $scope.$apply(function () {
                      $scope.visible = false;
                  })
              })
          }
      };
  })
  </code></pre>
  
  <p>My JsFidde link: <a href="https://jsfiddle.net/ywf7kL5y/" rel="nofollow noreferrer">https://jsfiddle.net/ywf7kL5y/</a></p>