如何使用angularjs關閉點擊正文的動態生成下拉菜單？

Question

嗨，我正在angularjs中開發web應用程序。在右上角我有一個下拉框，這將只在用戶登錄後變爲活動狀態。我有場景，用戶點擊下拉菜單，一旦他點擊頁面上的任何地方我想關閉下拉菜單。我很努力地解決這個問題。爲了理解我面對的問題，我已經創建了重拳。

`https://plnkr.co/edit/4RjrBDHE6mmxofwRovfB?p=preview` 

可能我得到一些幫助在這裏解決這一問題？任何幫助將不勝感激！。謝謝...

Answer 1

您可以使用$event.stopPropagation。您可以添加以下代碼，使其工作

HTML：

<div class="user" ng-click="OpenDropdown($event)"> 
    <h1>Dropdown</h1> 
    <div class="user-dropdown" ng-show="dp" id="ProfileDropdown"></div> 
</div> 

JS：

$scope.OpenDropdown = function(event) { 
    if ($scope.dp === false || $scope.dp === undefined) { 
     $scope.dp = true; 
     event.stopPropagation(); 
    } else { 
     $scope.dp = false; 
    } 
}; 
window.onclick = function() { 
    if ($scope.dp) { 
     $scope.dp = false; 
     $scope.$apply(); 
    } 
}; 

工作演示：https://plnkr.co/edit/6h91NXc4S8zD7jAbOz33?p=preview

如果你想使用指令要達到此目的，請檢查此solution