如何在使用angularjs点击身体时关闭动态生成的下拉菜单? [英] How to close dynamically generated dropdown on clicking on the body using angularjs?
问题描述
您好我正在开发angularjs中的Web应用程序。在右上角我有一个下拉框,只有在用户登录后才会激活。我有用户点击下拉菜单的场景,一旦他点击页面上的任何地方我想关闭下拉列表。我很长时间都在努力解决这个问题。我已经创建了plunker,以便了解我正面临的问题。
Hi i am developing web application in angularjs. On top right corner i have one drop-down box and this will become active only after user logged in. I have scenario where user clicks on dropdown and once he clicks anywhere on the page i want to close the dropdown. I am struggling to fix this from long time. I have created plunker in order to understand what problem i am facing properly.
`https://plnkr.co/edit/4RjrBDHE6mmxofwRovfB?p=preview`
我可以在这里得到一些帮助来解决这个问题吗?任何帮助将不胜感激!。谢谢......
May i get some help here to fix this? Any help would be greatly appreciated!. Thank you...
推荐答案
您可以使用 $ event.stopPropagation
。您可以添加以下代码以使其正常工作
You can use $event.stopPropagation
. You can add the following code to make it work
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
如果您想使用指令来实现此目的,请查看 解决方案
If you want to use a directive to achieve this, check out this solution
这篇关于如何在使用angularjs点击身体时关闭动态生成的下拉菜单?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!