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。 调整屏幕大小时,菜单项消失,菜单图标出现,但点击它不起作用。 我坚持这一点,我知道它必须是一个简单的修复,但我无法弄清楚。 任何帮助,将不胜感激!

8 Solutions collect form web for “Twitter的Bootstrap Navbar与AngularJS – 崩溃无法正常工作”

对于那些感兴趣的人 – 这是另一种实现这个没有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

  • 自举中7个相同的列
  • 引导NavBar与左,中间和右alignment的项目
  • 这些属性是什么:“咏叹调标签”和“咏叹调隐藏”
  • 如何在禁用的button上启用引导工具提示?
  • 在执行多响应列时清除行 - 引导
  • 是否可以使用一个div作为Twitter的Popover的内容
  • 摆脱Twitter Bootstrap中的所有圆angular
  • Bootstrap 3 - 根据屏幕大小设置模态窗口的高度
  • 在Bootstrap工具提示中显示长文本
  • 如何知道哪个HTML元素是造成垂直滚动条
  • 如何打开特定的引导程序导航选项卡的标签点击一个particuler链接使用jQuery?