AngularJS w/ bootstrap 下拉菜单不起作用

Question

我正在使用 AngularJS 和 bootstrap 创建一个社交网站，网站快完成了，但下拉菜单不起作用。

我在网上尝试了很多解决方案，但 none 似乎可行。

"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>

我正在使用 angular 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>

AngularJS w/ bootstrap 下拉菜单不起作用

AngularJS w/ bootstrap dropdown does not work

navigation

twitter-bootstrap

angularjs

drop-down-menu