Javascript 如果在外部单击，则隐藏元素

我是新来写自定义指令的。我试图在angular中创建类似于背景（模式ui.bootstrap）的东西。
这是我正在做的小提琴：

我想要的是：当用户点击按钮（左上）菜单时，打开菜单，我想要在点击菜单外后关闭它

指令：

    app.directive("Trigger", function () {
    return {
        restrict: 'C',
        link: function (scope, element, attrs, event) {
            element.click(function(){
if (e.target.id != "parentUl" && !$(e.target).closest("#rightMenu").length) {
            $("#rightMenu").removeClass("noneStyle");
        }
            });
        }
    };
});

我不知道

restrict:'C'

是否适合这种情况。

---

谢谢你的帮助。

运行并阅读CSS中的评论

JS:

CSS:

当bottom=0时，它将覆盖整个屏幕，因为左、右、上、下都是0，位置=abs

#CoverUpWholeScreen {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    z-index: 1; /*higher than normal element but low than right menu */
}

当右菜单展开时，将覆盖整个屏幕

#CoverUpWholeScreen.show {
    bottom: 0;
}

应用指令（“触发器”，函数（）{ 指令名称应为camelcase->thisIsAValidDirectiveName，但不是Pasalcase:thisiserror 当您将其标记为HTML元素时，名称应全部小写，并用破折号分隔：this-is-a-valid-directive-name

A：按属性标记->此-is-A-valid-directive-name=“aValueForScope” C:A:按类标记->class=“this-is-A-valid-directive-name” E:A:按自定义HTML元素标记-> 您可以立即设置限制：“ACE”或“CE”标记方式的任何组合

作用域非常复杂，单向绑定、双向绑定、隔离作用域、转移作用域、无作用域等等。我对事情的发展不太熟悉，所以……我帮不了你多少忙

让我们谈谈作用域：'=noneStyle'。 =是一个符号，表示角绑定非样式为两个数据绑定。即：当您更新此指令内的值时，父范围（控制器中的范围）中的源值也将更新，反之亦然。将其设置为双向数据绑定很重要，否则值将不同步

CoverUpHoleScreen具有触发器类->指令， 当此指令元素->单击：删除右菜单类并更新控制器的值时。 由于这是范围外的操作（不是scope.xxx=“aaa”或在scope.runFn（）；）中运行函数， 我们需要调用scope.$apply（）；来告诉angular：“嘿，我改变了一些东西，请为我更新它。”

之所以应该使用虚拟div覆盖整个屏幕，是因为您不想每次都检查鼠标单击事件，以确定右菜单是否已展开，然后删除类

---

当您在正文中添加元素时，这些元素将阻挡背景（div），因此将z索引向上移动一点，但不要移动到最高位置，因为它也将覆盖右菜单。

在单击要显示的按钮时获取菜单id

 @ViewChild('mobmenu') menu:any;

在oninit组件中写入以下内容

this.renderer.listenGlobal('document', 'click', (event:any) => {
console.log(this.renderer);
if(!this.menu.nativeElement.contains(event.target)){
    this.resclass="";
} else{
    if(this.resclass=="mobile_menu")
    {
        this.resclass="";   
    }
    else{
        this.resclass="mobile_menu";        
    }

}

});

---

很多thx朋友，你每天都教我。你能看看这个吗：有没有可能对它进行全局定义？问题是，如果我有这样的多个菜单，例如菜单中有一个accardion菜单，如果有一些全局性的东西，我可以在任何地方添加它。对不起，我不明白你的意思。画一些东西或更多地说明它？你已经在使用它了吗h angular中的模态ui？有一个背景选项，如果你将其设置为true，你可以通过单击div外部来关闭模态。我认为你仍然可以使用上面的解决方案，但需要做一些更改。使用类来指向所有菜单，然后它们中的每一个都删除类？当某个菜单触发某个菜单显示或展开时，当单击t dummy，删除类

this.renderer.listenGlobal('document', 'click', (event:any) => {
console.log(this.renderer);
if(!this.menu.nativeElement.contains(event.target)){
    this.resclass="";
} else{
    if(this.resclass=="mobile_menu")
    {
        this.resclass="";   
    }
    else{
        this.resclass="mobile_menu";        
    }

}

});