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

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如果用户单击窗口中任何不是带有“button”类的 div 的地方，则设置为 false。我怎样才能做到这一点？

Answer 1

快速/简单的方法

最快/最简单的方法是将您的取消代码( ng-click="show=false" )放在 body 上。元素，然后添加 $event.stopPropagation() 到现有的 ng-click。这样，每当您单击按钮时，由于防止单击事件向上传播，取消代码就不会触发。但是，单击其他任何地方会触发 ng-click在 body ，以便运行取消代码。 Here's a fiddle这样做。

更“Angular ”的方式

我认为获得相同结果的稍微“更好”或“更有 Angular ”的方法是创建一个新的 click-off可以放在 ng-click 旁边的指令。新指令可以 (a) 在将停止传播的目标元素上注册另一个点击处理程序，以及 (b) 在 body 上注册一个点击处理程序。元素来触发您需要的任何取消代码。 Here's a fiddle for that approach .