AngularJS w /引導下拉不起作用

Question

我創建一個社交網站使用AngularJS引導，網站幾乎完成，但下拉不起作用。

我已經嘗試了許多在線解決方案，但他們都沒有工作。

「ui.router」 和 「ui.bootstrap」 在我app.js所以這不是問題

HTML：

<div role="navigation" class="navbar navbar-default navbar-fixed-top"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button data-target=".navbar-collapse" data-toggle="collapse" class="navbar-toggle collapsed" type="button"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a href="/voting" class="navbar-brand">{{ settings.sitename }}</a> 
     </div> 
     <div class="navbar-collapse collapse"> 

      <form role="search" class="navbar-form navbar-right" ng-if="isSignupPage"> 
       <div class="form-group"> 
        {{ 'already_registered' | translate }} 
       </div> 
       <a class="btn btn-default" ui-sref="login">{{ 'login_action' | translate }}</a> 
      </form> 
      <form role="search" class="navbar-form navbar-right" ng-if="isLoginPage"> 
       <div class="form-group"> 
        {{ 'no_account_signup' | translate }} 
       </div> 
       <a class="btn btn-success" ui-sref="signup">{{ 'signup_action' | translate }}</a> 
      </form> 
     </div><!--/.nav-collapse --> 
    </div> 
</div> 

我使用角度1.4.0

Answer 1

您忘記了dropdown指令。 Angular Bootstrap文檔說：Dropdown是一個簡單的指令，它將在點擊或編程時切換下拉菜單。

<div class="btn-group" dropdown is-open="status.isopen"> 
     <button id="single-button" type="button" class="btn btn-primary" dropdown-toggle ng-disabled="disabled"> 
     Button dropdown <span class="caret"></span> 
     </button> 
     <ul class="dropdown-menu" role="menu" aria-labelledby="single-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> 

因此與您的代碼相關。

<div role="navigation" class="navbar navbar-default navbar-fixed-top"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button data-target=".navbar-collapse" data-toggle="collapse" class="navbar-toggle collapsed" type="button"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a href="/voting" class="navbar-brand">{{ settings.sitename }}</a> 
     </div> 
     <div class="navbar-collapse collapse"> 
      <div class="btn-group" dropdown is-open="status.isopen"> 
       <button id="single-button" type="button" class="btn btn-primary" dropdown-toggle ng-disabled="disabled"> 
      Button dropdown 
        <span class="caret"></span> 
       </button> 
       <ul class="dropdown-menu" role="menu" aria-labelledby="single-button"> 
        <li role="menuitem"> 
         <a href="#"> 
          <form role="search" class="navbar-form navbar-right" ng-if="isSignupPage"> 
           <div class="form-group"> 

         {{ 'already_registered' | translate }} 
        </div> 
           <a class="btn btn-default" ui-sref="login">{{ 'login_action' | translate }}</a> 
          </form> 
         </a> 
        </li> 
        <li role="menuitem"> 
         <a href="#"> 
          <form role="search" class="navbar-form navbar-right" ng-if="isLoginPage"> 
           <div class="form-group"> 
         {{ 'no_account_signup' | translate }} 
        </div> 
           <a class="btn btn-success" ui-sref="signup">{{ 'signup_action' | translate }}</a> 
          </form> 
         </a> 
        </li> 
       </ul> 
      </div> 
     </div> 
     <!--/.nav-collapse --> 
    </div> 
</div>