Angular - 当div背后的背景/区域被挖掘

Question

我一直在阅读，无法找到我认为明显的东西的答案。

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

但是，如果点击该div以外的任何位置，我可以切换该布尔值showLogoutDiv。

Angular有什么东西让我检查这个吗？

谢谢。 （顺便说一句 - 我做了我自己的'弹出窗格' - 就像这张截图一样 - 因为我找不到Angular中存在的任何东西 - 我是否遗漏了盒子里的东西）。

Answer 1

您正在寻找的角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>