带有 AngularJS 的 Bootstrap 导航栏-崩溃不起作用

我正在使用角度和 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 -->

导航栏显示完美。下拉框很好用。角度函数加载数据并将特定项标记为活动的，并完美地填充模型。唯一不起作用的是响应崩溃特性。当我调整屏幕大小时，菜单项消失，菜单图标出现，但点击它不起作用。我被困在这里了，我知道这必须是一个简单的解决办法，但我就是想不出来。如果你能帮忙，我会很感激的！

87090 次浏览
小开
最佳答案

这是个棘手的问题。医生给出了一种方法，而且效果很好。我复制了文档示例(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='#'属性。添加该属性也可以解决这个问题。

小开

对于那些感兴趣的-这里是另一种方式实现这没有 Bootstrap 的 javascript。

导入角度的 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>

约翰逊:

var myApp = angular.module('myApp', ['ui.bootstrap']);


function NavBarCtrl($scope) {
$scope.isCollapsed = true;
}

还有小提琴 http://jsfiddle.net/KY5Mf/

小开

不需要启用控制器。只需在初始编译模板时使用 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>
小开

我想让它与 纯 AngularJS一起工作，不再需要更多的 JavaScript 库，结果发现它非常简单。从 举个例子(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”，它们必须是唯一的，否则多个下拉列表将同时打开/关闭。(这很有趣，但很少有用)。

小开

我觉得这将是简单的 JS 修复:

//for close, opened dropdown.
$(".nav a").click(function () {
if ($(".navbar-collapse").hasClass("in")) {
$('[data-toggle="collapse"]').click();
}
});

如果这段代码不能正常工作，那么请查看它的绑定是否正确，因此将它放在加载页面的控制器中。

小开

将 和 bootstrap.min.js添加到 index.html 文件就解决了这个问题。

对于可折叠导航，我们需要包括 和 bootstrap.min.js

小开

下面是一个使用 ui.bootstrap.archive 模块的工作实现

超文本标示语言

<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 As 语法) :

(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。

小开

如果你正在寻找 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中相对容易。


提交答案