在某些情况下,停止Angular UI bootstrap下拉关闭?

时间:2015-06-13 13:19:59

标签: javascript angularjs angular-ui-bootstrap event-bubbling

我有一个包含标签和按钮的下拉列表。我希望能够在没有下拉关闭的情况下单击选项卡,但如果我单击一个按钮,它将关闭。

我使用$ event.stopPropagation()来停止关闭,但显然这会阻止按钮关闭它。

有办法做到这一点吗?

1 个答案:

答案 0 :(得分:10)

默认情况下,如果单击任何元素,下拉列表将自动关闭,您可以通过设置自动关闭选项来更改此行为,如下所示:

always - (默认)会在点击任何元素时自动关闭下拉列表。

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

disabled - 禁用自动关闭。然后,您可以使用is-open手动控制下拉列表的打开/关闭状态。请注意,如果单击切换按钮,按下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>