如何使用angularjs在單擊身體時關閉動態生成的下拉列表？

Question

嗨，我正在 angularjs 中開發 Web 應用程序。 在右上角，我有一個下拉框，只有在用戶登錄后才會激活。我有一個場景，用戶點擊下拉菜單，一旦他點擊頁面上的任何地方，我想關閉下拉菜單。 我很長一段時間都在努力解決這個問題。 我創建了 plunker 以了解我正面臨的問題。

 `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

如果您想使用指令來實現此目的，請查看此解決方案