javascript - 外部点击在 angularjs 中不起作用

Question

我有一个按钮。如果我单击该按钮，将在导航栏中打开一个弹出窗口。为此，我正在使用 ui-bootstrap。

如果我在外部单击，弹出窗口不会关闭。

• 我写了 window.onclick 函数来实现这个。这是工作。

• 但我的问题是，如果我单击按钮弹出窗口将会打开。如果我在下拉列表中选择任何值，则会在该值之上再打开一个弹出窗口。

• 因此，如果我在第二个下拉菜单中选择任何 dropdwon 值，第一个下拉菜单将自动关闭。

• 我的需要是，当我单击按钮时，下拉菜单应该打开。如果我在下拉菜单外单击关闭。

• 如果我从下拉列表中选择任何值，下拉列表应该稳定。它不应该熄灭。只有当我在那个时间之外单击时，它才应该消失。

<button id="btn-append-to-body" type="button" class="btn btn-primary" ng-show="showFilterBtn" ng-click="showDropdown($event)">
<img src="assets/images/filterIcon.png">&nbsp&nbspFilter <span class="caret"></span>
</button>
<li class="nav-item dropdown">
  <div class="dropdown-menu">
    <div class="dropdown-item" ng-repeat="filter in filters">
      <div>{{filter.filterObject}}</div>
    </div>
  </div>
</li>

window.onclick = function() {
   $(".dropdown-menu").hide();
}

如果我点击按钮，下拉菜单不应该出现。

Answer 1

这就是你可以做的，同样这不是理想的方法，因为我们提供的数据很少，我只能想到这种修复:)

window.addEventListener("click", function(event) {
    if (!$(event.target).hasClass('dropdown-menu') &&!$(event.target).parents().hasClass('dropdown-menu')) {
         $(".dropdown-menu").hide();
    }
});

编辑 1

只需添加一个父级 div 并为您不想关闭的下拉父级保留一个独特的类假设类名是 dropdown-select

然后像这样编辑条件

if (!$(event.target).hasClass('dropdown-select') &&!$(event.target).parents().hasClass('dropdown-select')) {