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

我用AngularJs制作了一个定制的contextmenu指令。现在，当我单击除自定义菜单之外的任何位置时，它都应该关闭。我在关闭菜单的文档中绑定了一个click函数，但是对于页面上有click事件的其他元素，它已经停止工作，只有documentclick函数在工作。我如何解决这个问题？ 我的角度代码：

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>

按钮
按钮

尝试单击外部插件 它很容易使用，只需这样使用即可：

---

我不能使用插件。我正试图在一个相当大的企业应用程序中使用它。我刚刚编写了简单的代码来获取逻辑。