Angular UI Bootstrap 下拉菜单无法使用 [is-open] 和 [append-to] 属性打开

Question

我想使用 angular ui lib 中的 bootstrap 下拉菜单。

当我使用 dropdown-append-to 将下拉列表附加到另一个 DOM 元素时遇到问题（即使 dropdown-append-to-body 也不起作用）。

只有当我使用 is-open 和 ng-click 触发下拉菜单时，我才能让它工作。

我在这个 plunker 中重现了这个问题。

我正在使用 bootstrap 3.3.6、angular ui 2.1.3 和 angular 1.5.8。

希望有人能帮助我。

Answer 1

您应该使用 uib-dropdown-toggle 并在您的控制器上添加 ng-click 和切换 test

此外，dropdown-append-to-body 应该接受一个值（默认为 false），例如 dropdown-append-to-body="true"

<div class="btn-group" uib-dropdown dropdown-append-to-body="true" is-open="test">
    <button type="button" ng-click="onClick(test)" class="btn btn-primary" uib-dropdown-toggle>
      Dropdown on Body <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="btn-append-to-body">
      <!-- list items -->
    </ul>
</div>

exmaple plunk

Angular UI Bootstrap 下拉菜单无法使用 [is-open] 和 [append-to] 属性打开

Angular UI Boostrap dropdown does not open with [is-open] and [append-to] attributes

twitter-bootstrap

angularjs

angular-ui-bootstrap