外部点击在angularjs中不起作用

Question

I have a button. If i click that button one popup will open in Navbar. I am using ui-bootstrap for this.

If I click outside the popup is not closing.

• I wrote window.onclick function to achieve this. It is working.

• But My problem is, If I click button popup will open. If I select any value in dropdown, on top of that one more popup will open.

• So If I select any dropdwon value on the second dropdown, the first dropdown is automatically closing.

• My need is, When I click button dropdown should open. and If I click outside the dropdown close.

• If I select any value from dropdown, the dropdown should stable. It should not go off. Only when I click outside that time only it should go.

<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();
}

If I click button, the dropdown should not go.

Answer 1

This is how you can do, again this is not ideal way to do it, since we have little data provided by you, I can only think of this kind of fix :)

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

EDIT 1

Just add a parent div and keep a unique class for dropdown-parents which you don't want to close suppose class name is dropdown-select

and then just edit the condition like this

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

Answer 2

You should add an extension to the jquery library then add this script since you are using javascript

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