javascript - Angular ui-bootstrap 下拉菜单始终初始打开

Question

我在我的 Angular 项目中使用 ui-boostrap ，遇到了一个奇怪的问题:我的下拉菜单总是最初打开。我还尝试通过 Controller 强制关闭状态，但这也不起作用。

这是我的导航和下拉菜单:

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#/home">
        <img width="32" alt="Brand" src="assets/img/Blitz_blue_140.png">
    </a>
  </div>

  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav">
      <li uib-dropdown>
        <a id="project-dropdown" uib-dropdown-toggle>
          Projects <span class="caret"></span>
        </a>
        <ul uib-dropdown-menu aria-labelledby="project-dropdown">
          <li ng-hide="project.name == 'Inbox'" ng-repeat="project in projects">
            <a ng-href="#/tasks/{{project.projectid}}">
                <i class="fa fa-diamond"></i> {{project.name}} 
            </a>
          </li>
        </ul>
      </li>
      <li><a href="#">+ Project</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
        <li uib-dropdown>
          <a id="user-dropdown" uib-dropdown-toggle role="button" is-open="false" aria-expanded="false">
            {{user.username}} <span class="caret"></span>
          </a>
          <ul uib-dropdown-menu aria-labelledby="user-dropdown" role="menu" >
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a ng-click="logout()">Logout</a></li>
          </ul>
        </li>
      </ul>
  </div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->

我还使用 ui-bootstrap 文档中的代码片段对其进行了测试，并遇到了同样的问题:

<div class="btn-group pull-right" uib-dropdown>
      <button id="split-button" type="button" class="btn btn-danger">Action</button>
      <button type="button" class="btn btn-danger" uib-dropdown-toggle>
        <span class="caret"></span>
        <span class="sr-only">Split button!</span>
      </button>
      <ul uib-dropdown-menu role="menu" aria-labelledby="split-button">
        <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>
    </div>

我使用的是 Angular 1.5.0 和最新版本的 ui-bootstrap

Answer 1

粘贴到您的 html is-open="status.isopen" 和 Controller 中:

$scope.status.isopen = !$scope.status.isopen;

默认设置为 false:

$scope.status.isopen = false;