javascript - Stop Angular UI bootstrap dropdown from closing in certain cases? - Stack Overflow

admin管理员组

文章数量:1291315

I have a dropdown which contains tabs and buttons. I want to be able to click the tabs without the dropdown closing but if I click a button it will close.

I used $event.stopPropagation() to stop the closing but obviously this blocks the buttons closing it too.

Is there a way to do this?

I have a dropdown which contains tabs and buttons. I want to be able to click the tabs without the dropdown closing but if I click a button it will close.

I used $event.stopPropagation() to stop the closing but obviously this blocks the buttons closing it too.

Is there a way to do this?

• javascript
• angularjs
• angular-ui-bootstrap
• event-bubbling

Share Improve this question Follow asked Jun 13, 2015 at 13:19 TrialNameTrialName 11511 gold badge22 silver badges66 bronze badges 3

• Why not keep the stopPropagation() and close the dropdown yourself in the buttons' ng-click handlers? (And set the auto-close option on the dropdown to outsideClick or disabled) – tavnab Commented Jun 13, 2015 at 13:24
• I had the stopPropagation() on the tabset, this block everything. outsideClick seem to work in a plunker I make but not in my app, odd. – TrialName Commented Jun 13, 2015 at 13:48
• I was working off angular ui bootstrap 0.13.0, moving to 0.13.1 made it work again. I was a known bug. – TrialName Commented Jun 13, 2015 at 14:24

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

By default the dropdown will automatically close if any of its elements is clicked, you can change this behavior by setting the auto-close option as follows:

always - (Default) automatically closes the dropdown when any of its elements is clicked.

outsideClick - closes the dropdown automatically only when the user clicks any element outside the dropdown.

disabled - disables the auto close. You can then control the open/close status of the dropdown manually, by using is-open. Please notice that the dropdown will still close if the toggle is clicked, the esc key is pressed or another dropdown is open.

Here is a sample : Plunker

    <div class="btn-group" dropdown auto-close="disabled">
      <button type="button" class="btn btn-danger">Action</button>
      <button type="button" class="btn btn-danger dropdown-toggle" dropdown-toggle>
        <span class="caret"></span>
        <span class="sr-only">Split button!</span>
      </button>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </div>

本文标签： javascriptStop Angular UI bootstrap dropdown from closing in certain casesStack Overflow