我正在使用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函数加载数据并将特定项标记为活动，并完美填充模型。唯一不起作用的是响应式折叠功能。当我调整屏幕大小时，菜单项会消失并显示菜单图标，但单击它不起作用。我坚持这个，我知道它必须是一个简单的解决方案，但我无法弄明白。任何帮助将不胜感激！
答案 0 :(得分：103)
对于那些感兴趣的人 - 这是在没有Bootstrap的javascript的情况下实现这一点的另一种方法。
导入Angular的 UI-Bootstrap 。
HTML：
<div class="navbar navbar-inverse" ng-controller="NavBarCtrl">
<div class="navbar-inner">
<div class="container">
<button class="btn btn-navbar" ng-click="isCollapsed = !isCollapsed">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> <a class="brand" href="#">Short Course</a>
<div class="nav-collapse" uib-collapse="isCollapsed">
<ul class="nav">
<li><a href="#"><i class="icon-home icon-white"></i> Home</a>
</li>
<li><a href="#">Lessons</a>
</li>
<li><a href="#">Grades</a>
</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 -->
</div>
JS：
var myApp = angular.module('myApp', ['ui.bootstrap']);
function NavBarCtrl($scope) {
$scope.isCollapsed = true;
}
答案 1 :(得分：82)
我想让它与纯AngularJS 一起使用，而且没有其他JavaScript库，结果证明它非常简单。从example here（bootstrap v3）开始只需要进行两项更改：
而不是
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
我用过：
<button type="button" class="navbar-toggle" ng-init="isCollapsed = true" ng-click="isCollapsed = !isCollapsed">
而不是
<div class="collapse navbar-collapse">
我用过：
<div class="navbar-collapse" ng-class="{collapse: isCollapsed}">
此外，如果您的导航栏中有任何下拉菜单，则同样适用于它们，除了css类不是'折叠'，而是'打开'：
<li class="dropdown" ng-class="{ open : dd1 }" ng-init="dd1 = false" ng-click="dd1 = !dd1">
请注意，多个下拉列表在角度根范围内都需要自己的状态变量（如果您没有使用控制器）。因此我在这里命名了第一个下拉列表'dd1'，它们需要是唯一的，否则多个下拉列表将同时打开/关闭。 （这很有趣，但很少使用）。
答案 2 :(得分：7)
这是一个棘手的问题。文档显示了一种方式，它的功能很好。我复制了文档示例（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">
我不知道为什么，但改变它使它运作良好。
<强> 修改
Arbiter指出<a />缺少href='#'属性。添加该属性也可以解决问题。
答案 3 :(得分：6)
无需使用控制器。在最初编译模板时，只需使用ng-init初始化isCollapsed标志。
<div class="navbar navbar-inverse" ng-controller="NavBarCtrl">
<div class="navbar-inner">
<div class="container">
<button class="btn btn-navbar" ng-init="isCollapsed = true" ng-click="isCollapsed = !isCollapsed">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> <a class="brand" href="#">Short Course</a>
<div class="nav-collapse" collapse="isCollapsed">
<ul class="nav">
<li><a href="#"><i class="icon-home icon-white"></i> Home</a>
</li>
<li><a href="#">Lessons</a>
</li>
<li><a href="#">Grades</a>
</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 -->
</div>
答案 4 :(得分：6)
如果您正在寻找Angular2。然后打击是所需的更改。
<button type="button" class="navbar-toggle collapsed" (click)="toggleCollapse()"
aria-expanded="false">
和菜单看起来应该是这样的。
<div class="navbar-collapse" id="bs-navbar-collapse" [class.collapse]="isCollapsed">
<ul class="nav navbar-nav">
<li>
<a href="">
Dashboard
您的控制器应该是这样的。
import { Component} from '@angular/core';
@Component({
selector: 'app-navbar',
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.css']
})
export class NavbarComponent {
isCollapsed: boolean = true;
toggleCollapse(): void {
this.isCollapsed = !this.isCollapsed;
}
}
请参阅angular2这相对容易。感谢@yankee的回答。
答案 5 :(得分：4)
这是一个使用ui.bootstrap.collapse模块的工作实现。 https://jsfiddle.net/7z8hLuyu/
HTML
<div ng-app="app">
<nav class="navbar navbar-default">
<div class="container-fluid" ng-controller="NavigationCtrl as vm">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" ng-click="vm.toggleCollapse()">
<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="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="navbar-collapse" style="overflow:hidden!important;" uib-collapse="vm. isCollapsed">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></ li>
<li><a href="#">Link</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
Controller（使用controllerAs语法）：
(function(){
'use strict';
angular
.module('app', ['ngAnimate','ui.bootstrap.collapse'])
.controller('NavigationCtrl', NavigationCtrl);
NavigationCtrl.$inject = [];
function NavigationCtrl() {
var vm = this;
vm.isCollapsed = true;
vm.toggleCollapse = toggleCollapse;
function toggleCollapse() {
vm.isCollapsed = !vm.isCollapsed;
}
}
})();
注意：要使动画在ui.bootstrap模块中工作，您必须包含ngAnimate。
答案 6 :(得分：0)
我觉得这将是简单的JS修复：
//for close, opened dropdown.
$(".nav a").click(function () {
if ($(".navbar-collapse").hasClass("in")) {
$('[data-toggle="collapse"]').click();
}
});
如果此代码无法正常工作，请查看它是否正确绑定，因此请将其放在加载页面的控制器中。
答案 7 :(得分：0)
只需将 jquery.min.js和bootstrap.min.js 添加到index.html文件即可解决此问题。
对于可折叠导航，我们需要包含 jquery.min.js和bootstrap.min.js