0

AngularJs UI Bootstrap 在为包含“下拉菜单”类的 ui 元素添加 ng-if 条件时错误计算了下拉菜单的位置。

AngularJs UI Bootstrap 版本 - 0.3.13 AngularJs 版本 - 1.3.17

这是一个重新生成问题的 plunker - http://next.plnkr.co/edit/sSXH5KeMQymaFNpG

<div class="btn-group" dropdown dropdown-append-to-body>
  <button id="btn-append-to-body" type="button" class="btn btn-primary" dropdown-toggle>
     Dropdown on Body <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" ng-if="myFlag" role="menu" aria-labelledby="btn-append-to-body"></ul>
</div>

期待 ui-bootstrap 的一些解决方案

4

1 回答 1

1

ng-if 将创建一个独立的子范围，当条件为假时它会从 DOM 中删除元素，并且仅在条件变为真时才将元素添加回来，而 ng-show 只是通过添加 CSS 显示来切换元素的外观: 没有风格。

您可以使用ng-show代替：

<ul class="dropdown-menu" ng-show="myFlag" role="menu" aria-labelledby="btn-append-to-body">
      <li role="menuitem"><a href="#">Action</a></li>
      <li role="menuitem"><a href="#">Another action</a></li>
      <li role="menuitem"><a href="#">Something else here</a></li>
      <li class="divider"></li>
      <li role="menuitem"><a href="#">Separated link</a></li>
    </ul>
于 2019-12-31T14:39:20.750 回答