javascript - 如何使用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

如果您想使用指令来实现这一点，请查看此 solution