在某些情况下停止 Angular UI bootstrap 下拉菜单关闭？

Question

我有一个包含选项卡和按钮的下拉菜单。我希望能够在不关闭下拉菜单的情况下单击选项卡，但如果我单击按钮，它将关闭。

我使用 $event.stopPropagation() 来停止关闭，但显然这也阻止了关闭它的按钮。

有办法吗？

Answer 1

默认情况下，如果单击其任何元素，下拉菜单将自动关闭，您可以通过如下设置自动关闭选项来更改此行为：

always -（默认）在单击其任何元素时自动关闭下拉菜单。

outsideClick - 仅当用户单击下拉列表外的任何元素时才自动关闭下拉列表。

disabled - 禁用自动关闭。然后，您可以使用 is-open 手动控制下拉列表的 open/close 状态。请注意，如果单击切换按钮、按下 esc 键或打开另一个下拉菜单，下拉菜单仍会关闭。

这是一个示例：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>

在某些情况下停止 Angular UI bootstrap 下拉菜单关闭？

Stop Angular UI bootstrap dropdown from closing in certain cases?

javascript

event-bubbling

angularjs

angular-ui-bootstrap