我的网站上有一个下拉菜单,由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设置为false,前提是用户单击窗口中不是类“button”的div的任何位置。我怎样才能做到这一点?

最佳答案

快速/简便的方法

最快/最简单的方法是将取消代码(ng-click="show=false")放在body元素上,然后将 $event.stopPropagation() 添加到现有的ng-click中。这样,每次您单击按钮时,由于阻止了click事件向上传播,因此取消代码不会触发。但是,单击其他任何位置都会在ng-click上触发body,以便取消代码运行。 Here's a fiddle执行此操作。

更多“Angular ”方式

我认为获得相同结果的稍微“更好”或“更具 Angular ”的方法是创建一个可以与ng-click并排放置的新click-off指令。新指令可以(a)在目标元素上注册另一个单击处理程序,这将阻止传播,并且(b)在body元素上注册单击处理程序,以触发所需的任何取消代码。 Here's a fiddle for that approach

关于angularjs - 单击浏览器窗口中的任意位置时,如何设置变量?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/21068955/

10-12 01:27
查看更多