如何在浏览器窗口中的任何位置单击时设置变量？

Question

我的网站上有一个由下拉菜单控制的下拉菜单ng-show.当用户点击按钮时,他们会看到下拉列表.当他们再次点击时,隐藏下拉列表:

<div class="button" ng-click="show = !show">Click Me</div>
<div ng-show="show" ng-init="show = false">
    <div>You can see me now!</div>
</div>

这很好用.但是,show如果用户点击窗口中不是带有"按钮"类的div的任何地方,我想要的是设置为false.我怎样才能做到这一点？

Answer 1

快速/简单的方法

最快/最简单的方法是将取消代码 ( ng-click="show=false")放在body元素上，然后添加$event.stopPropagation()到现有的 ng-click。这样，每当您单击按钮时，由于单击事件被阻止向上传播，因此取消代码不会触发。但是，单击其他任何位置都会触发ng-click，body以便运行取消代码。这是一个可以做到这一点的小提琴。

更多“角度”方式

我认为获得相同结果的稍微“更好”或“更有角度”的方法是创建一个click-off可以与 ng-click 并存的新指令。新指令可以 (a) 在目标元素上注册另一个单击处理程序以停止传播，以及 (b) 在元素上注册一个单击处理程序body以触发您需要的任何取消代码。 这是该方法的小提琴。