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>