带有 AngularJS 的 Twitter Bootstrap 导航栏 - 折叠不起作用 [英] Twitter Bootstrap Navbar with AngularJS - Collapse Not Functioning

问题描述

我正在使用 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="容器"><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="#">短期课程</a><div class="nav-collapse collapse"><ul class="nav"><li><a href="#"><i class="icon-home icon-white"></i>主页</a></li><li class="dropdown ng-class: settingsActive;"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Intro <b class="caret"></b></a><ul class="下拉菜单"><li><a onclick='$("#myModal").modal("show");'>用户信息</a></li><li><a href="#/setup">设置</a></li><li><a href="#/get-started">使用入门</a></li><li class="dropdown ng-class: programActive;"ng-controller="ProgramCtrl"><a href="#" class="dropdown-toggle" data-toggle="dropdown">课程 <b class="caret"></b></a><ul class="下拉菜单">
<a href="#/program/{{o.value}}">{{o.title}}</a>
<li class="divider"></li><li><a href="#/freeform">自由格式</a></li><li class="dropdown ng-class:reportsActive;"><a href="#" class="dropdown-toggle" data-toggle="dropdown">成绩<b class="caret"></b></a><ul class="下拉菜单"><li><a href="#">简单报告</a></li><li><a href="#">综合报告</a></li><li class="divider"></li><li><a href="#">当前成绩报告</a></li><li><a href="#">期末成绩报告</a></li><ul class="nav pull-right"><li><a href="#/class"><i class="icon-upload icon-white"></i>上传/保存</a></li><li><a href="#/class"><i class="icon-off icon-white"></i>保存/注销</a></li></div><!--/.nav-collapse -->
</div><!--/navbar-inner -->

导航栏显示完美.下拉菜单效果很好.Angular 函数加载数据并将特定项目标记为活动并完美填充模型.唯一不起作用的是响应式折叠功能.当我调整屏幕大小时，菜单项消失，菜单图标出现，但单击它不起作用.我被困在这个问题上，我知道它必须是一个简单的修复，但我就是想不通.任何帮助将不胜感激！

解决方案

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

唯一的区别是 而不是

代替

我不知道为什么，但改变它使它运行得很好.

编辑

Arbiter 指出 缺少 href='#' 属性.添加该属性也可以解决问题.

I am using Angular and Twitter Bootstrap navbar and trying to get the collapse functionality to work.

Partial: program.html

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

Partial: 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 -->

The navbar displays perfectly. The dropdowns work great. The Angular functions load the data and mark the specific items as active and populate the models perfectly. The only thing that doesn't work is the responsive collapse feature. When I resize the screen, the menu items disappear and the icon for the menu appears, but clicking on it does not work. I am stuck on this and I know it has to be a simple fix, but I just can't figure it out. Any help would be appreciated!

解决方案

This was a tricky one. The docs showed one way, and it functions great. I copied the docs example (http://twitter.github.com/bootstrap/components.html#navbar) and tried using it. I then went to the examples page and tried the layout listed here: http://twitter.github.com/bootstrap/examples/fluid.html

The one and only difference was a <button> instead of <a>

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

Instead of

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

I don't know why, but changing that made it function great.

EDIT

Arbiter pointed out that the <a /> was missing the href='#' attribute. Adding that attribute would also solve the problem.

这篇关于带有 AngularJS 的 Twitter Bootstrap 导航栏 - 折叠不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！