外部点击在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')) {

Answer 2

你应该为 jquery 库添加一个扩展，然后添加这个脚本，因为你使用的是 javascript

    <script>
        $( document ).ready(function() {
            $(".dropdown-menu").hide();
        });
    </script>