带有AngularJS的Twitter Bootstrap Navbar-折叠不起作用

Question

我正在使用Angular和Twitter Bootstrap导航栏，并尝试使折叠功能正常工作。

部分：program.html

<div class="navbar navbar-inverse navbar-static-top" ng-include="'partials/navbar.html'" ng-controller="NavbarCtrl"></div>

部分：navbar.html

<div class="navbar-inner">
    <div class="container">
        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </a>
        <a class="brand" href="#">Short Course</a>
        <div class="nav-collapse collapse">
            <ul class="nav">
                <li><a href="#"><i class="icon-home icon-white"></i> Home</a></li>
                <li class="dropdown ng-class: settingsActive;">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Intro <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a onclick='$("#myModal").modal("show");'>User Info</a></li>
                        <li><a href="#/setup">Settings</a></li>
                        <li><a href="#/get-started">Getting started</a></li>
                    </ul>
                </li>
                <li class="dropdown ng-class: programActive;" ng-controller="ProgramCtrl">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Lessons <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li ng-repeat='o in lessonTypes'>
                            <a href="#/program/{{o.value}}">{{o.title}}</a>
                        </li>
                        <li class="divider"></li>
                        <li><a href="#/freeform">Free Form</a></li>
                    </ul>
                </li>
                <li class="dropdown ng-class: reportsActive;">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Grades <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Simple Report</a></li>
                        <li><a href="#">Comprehensive Report</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Current Grade Report</a></li>
                        <li><a href="#">Final Grade Report</a></li>
                    </ul>
                </li>
            </ul>
            <ul class="nav pull-right">
                <li><a href="#/class"><i class="icon-upload icon-white"></i> Upload/Save</a></li>
                <li><a href="#/class"><i class="icon-off icon-white"></i> Save/Logout</a></li>
            </ul>
        </div><!-- /.nav-collapse -->
    </div>
</div><!-- /navbar-inner -->

导航栏显示完美。下拉菜单效果很好。Angular函数加载数据并将特定项标记为活动状态，并完美填充模型。唯一不起作用的是响应折叠功能。当我调整屏幕大小时，菜单项消失，并且出现菜单图标，但是单击它不起作用。我对此固执己见，我知道它必须是一个简单的修复程序，但我无法弄清楚。任何帮助，将不胜感激！

Answer 1

这是一个棘手的问题。该文档显示了一种方法，并且功能很好。我复制了文档示例（http://twitter.github.com/bootstrap/components.html#navbar）并尝试使用它。然后，我转到示例页面并尝试了此处列出的布局：http
:
//twitter.github.com/bootstrap/examples/fluid.html

唯一的一个区别是<button>，而不是<a>

<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">

代替

<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">

我不知道为什么，但是更改它使其功能很棒。

编辑

仲裁者指出，<a />缺少href='#'属性。添加该属性也可以解决该问题。