我的网站上有一个下拉菜单,由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/