如果在Angular外部单击，则隐藏elemnt

我是新手编写自定义指令。 我试图用角度创建类似背景（模态ui.bootstrap）的东西。
这是我正在努力的小提琴： LINK 。

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

指令 ：

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'适合这种情况。
谢谢你的帮助。

Answer 1

在CSS http://jsfiddle.net/evqw2zhp/3/中运行并阅读评论

JS：

 app.directive("trigger", function () { return { restrict: 'C', scope: '=noneStyle', link: function (scope, element, attrs) { $(element).click(function (e) { $("#rightMenu").removeClass("noneStyle"); scope.noneStyle = false; scope.$apply(); console.log(scope); }); } }; }); 

CSS：

当bottom = 0时，由于left，right，top，bottom全部为0而position = 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; } 

app.directive（“trigger”，function（）{指令名称应该是camelcase-> thisIsAValidDirectiveName但不是Pasalcase：ThisIsWrong当你将它标记为HTML元素时，名称应全部小写并用破折号分隔：this-is-a-有效的指导性名称

A：用属性标记它 – > this-is-a-valid-directive-name =“aValueForScope”C：A：用class-> class =“this-is-a-valid-directive-name”标记它：E：答：通过自定义HTML元素标记它 – >您可以设置限制：’ACE’或’CE’，无论您想要一次混合标记方式。

范围相当复杂，单向绑定，双向绑定，隔离范围，转换范围，无范围等。我对事情的发展并不十分熟悉，所以……我帮不了你。

我们来谈谈范围：’= noneStyle’。 =是一个符号，告诉Angular将noneStyle绑定为两个数据绑定。 即：当您更新此指令内的值时，父值范围（控制器中的范围）中的源值也将更新，反之亦然。 将其设置为双向数据绑定很重要，否则值不会同步。

CoverUpWholeScreen有触发class-> a指令，当这个指令元素 – >点击：删除右边的菜单类并更新控制器的值。 因为这是范围之外的操作（不是scope.xxx =“aaa”;或者在范围内运行函数：scope.runFn（）;），我们需要调用scope。$ apply（）; 告诉棱角分明：“嘿，我改变了一些东西，为我更新它。”

因为你不想每次都检查鼠标点击事件是否扩展了右边的菜单然后删除了类，你应该为整个屏幕制作一个虚拟div。

当你在body中添加元素时，这些元素将阻塞背景（div），因此将z-index向上移动一点但不是最高，因为它也会覆盖右侧菜单。

Answer 2

获取要显示的单击按钮的菜单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"; } } });