角度ui-bootstrap下拉菜單始終始終處於打開狀態

Question

我在我的有角項目中使用ui-boostrap，但遇到一個奇怪的問題：我的下拉菜單始終是最初打開的。 我也嘗試通過控制器強制關閉狀態，但是這也不起作用。

這是我的下拉菜單導航：

<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"和您的控制器中：

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

默認設置為false：

$scope.status.isopen = false;