如何关闭AngularJs中的自定义上下文菜单？

Question

我在AngularJs中创建了一个自定义的contextmenu指令。现在，当我点击自定义菜单以外的任何地方时它应该关闭。我在关闭菜单的文档中绑定了一个点击功能，但是对于页面上有点击事件的其他元素，它们已停止工作，只有文档点击功能正在工作。我该如何解决这个问题？ 我的角度代码：

app.directive('preventRightClick', function() { 
return { 
    restrict: 'A', 
    scope: { 
     visible: '=' 
    }, 
    link: function($scope, $ele) { 
     $ele.on('contextmenu', '*', function(e) { 
      e.preventDefault(); 
      $scope.$apply(function() { 
       $scope.visible = true; 
       // console.log(e.pageX, e.pageY) 
       $('.parented').css({left:e.pageX, top:e.pageY}) 
      }) 
     }); 

     $(document).on('click', '*', function (e) { 
      if ($(e.target).parents('.parented').length > 0) { 
       // console.log('yes, its parent'); 
       // console.log($(e.target)) 
       console.log('Within parent clicked') 
      } 
      else{ 
       $scope.$apply(function() { 
        $scope.visible = false; 
       }) 
       console.log('Outside parent clicked') 
      } 
     })    
} 
}; 
}) 

我的HTML：

<div ng-if="isVisible" class="parented" style="display: inline-block;"> 
        <div class="btn-group-vertical notclick" role="group" aria-label="Vertical button group"> 
         <button type="button" class="btn btn-default">Button</button> 
         <button type="button" class="btn btn-default">Button</button> 
</div> 
</div> 

Answer 1

尝试角点击外插件 https://github.com/IamAdamJowett/angular-click-outside 它易于使用，只需使用它像： <div class="menu" click-outside="closeThis()"></div>