角度 - 当div外部的背景/区域轻敲时

Question

我一直在读书，找不到我认为很明显的答案。

我有一个菜单按钮，显示/隐藏包含2个按钮的小div窗格。我使用ng-click="main.showLogoutDiv = !main.showLogoutDiv"在两种状态之间切换。

但是我也希望如果点击div之外的任何地方，我可以切换布尔值showLogoutDiv。

Angular中有什么东西让我检查一下吗？

感谢。

（顺便说一下 - 我已经制作了自己的弹出式窗格＆＃39; - 就像这个截图一样 - 因为我无法找到Angular中存在的任何内容 - 我错过了盒子里出现的东西吗？ ）。

Answer 1

你正在寻找Adam Jowett的Angular click outside指令。你可以在像这样的元素上使用它：

<button id="my-button">Menu Trigger Button</button>
<div ng-controller="MenuController">
    <div class="menu" id="main-menu" click-outside="closeThis()" outside-if-not="my-button">
        ...
    </div>
</div>

当用户点击<div>之外的任何位置时，控制器中的closeThis()功能将会执行。但是，如果用户点击my-button元素，则不会将其视为click-outside。这允许您定义应忽略的元素。

您的click-outside函数可能包含以下代码：

function MenuController($scope) {
    $scope.closeThis = function () {
        showLogoutDiv = false;
    }
}

或者，您可以通过不使用范围函数并使用此表单在HTML中指定showLogoutDiv = false来简化操作：

<div ng-controller="MenuController">
    <div class="menu" id="main-menu" click-outside="showLogoutDiv=false">
        ...
    </div>
</div>