Twitter的Bootstrap Navbar与AngularJS – 崩溃无法正常工作
我正在使用Angular和Twitter Bootstrap导航栏，并试图让崩溃function工作。
部分：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函数加载数据并将特定项目标记为活动并完美填充模型。 唯一不起作用的是响应式崩溃function。 调整屏幕大小时，菜单项消失，菜单图标出现，但点击它不起作用。 我坚持这一点，我知道它必须是一个简单的修复，但我无法弄清楚。 任何帮助，将不胜感激！
对于那些感兴趣的人 – 这是另一种实现这个没有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; }
和小提琴 – http://jsfiddle.net/KY5Mf/
我想让它与纯AngularJS一起工作，没有更多的JavaScript库，事实certificate它非常简单。 从这里的示例开始只需要两个更改（引导程序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">
请注意，多个下拉菜单在angular根范围上都需要自己的状态variables（如果您不使用控制器）。 因此，我在这里命名了第一个下拉菜单“dd1”，它们需要是唯一的，否则多个下拉菜单将同时打开/closures。 （这很有趣，但很less使用）。
这是一个棘手的问题。 文件显示了一种方式，它的function很好。 我复制了文档示例（ 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">
我不知道为什么，但改变它使它function很好。
编辑
仲裁者指出， <a />缺lesshref='#'属性。 添加该属性也可以解决问题。
没有必要聘请一个控制器。 当初始编译模板时，只需使用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>
这是一个使用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>
控制器（使用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; } } })();
注意：要使animation在ui.bootstrap模块中工作，必须包含ngAnimate。
如果你正在寻找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的答案。
我觉得这将是简单的JS修复：
//for close, opened dropdown. $(".nav a").click(function () { if ($(".navbar-collapse").hasClass("in")) { $('[data-toggle="collapse"]').click(); } });
如果这个代码工作不正常，那就看它是否正确绑定，所以把它放在加载页面的控制器中。
只要将jquery.min.js和bootstrap.min.js添加到index.html文件即可解决此问题。
对于可折叠的导航，我们需要包含jquery.min.js和bootstrap.min.js
