angularjs 点击空白处关闭

Question

我有两个div，一个大的是全屏的，一个小的。我想要实现的效果是点击大的和小的之间的空白处，就能够做到关闭这两个div。我的代码如下：

<div id="zoom" ng-show="showZoom" class="ng-hide" style="background: rgba(0,0,0,0.5)" align="center">
                   
    <div style="width: 900px">
       <input type="button" value="close" ng-click="closeZoom()">
    </div>
                   
</div>

我现在点击close button可以关闭整个id为zoom的div。我想能够点击两个div之间的空间也达到这样的效果。不知道angular或者boostrap里面有没有相应的指令？

Answer 1

之前做过一个、父容器做点击消失、子容器做一个阻止冒泡就可以了

http://jsrun.net/BGpKp/show

能看到吗？
点击白色不会消失、点击蒙版会消失、白色是蒙版的子容器

Answer 2

可以大小div之间加个遮罩层。
点击大小div之间的空白处实质上就是点击遮罩层。在遮罩层上添加ng-click="closeZoom()"即可。
如果你想让遮罩层不可见，直接设置白色，透明就可以了