Twitter Bootstrap Navbar with AngularJS - Collapse Not Functioning

Question

I use Angular and Twitter Bootstrap navbar and try to make the collapse 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 --> 

Nabbar is perfectly displayed. Dropdown menus work great. Angular functions load data and mark specific elements as active and fill models perfectly. The only thing that doesn't work is the quick response feature. When I change the screen size, the menu items disappear and an icon for the menu appears, but clicking on it does not work. I am stuck on this and I know that this should be a simple solution, but I just can't figure it out. Any help would be appreciated!

Answer 1

It was complicated. The docs showed one way and it works great. I copied the docs example ( http://twitter.github.com/bootstrap/components.html#navbar ) and tried to use it. Then I went to the examples page and tried the layout shown here: http://twitter.github.com/bootstrap/examples/fluid.html

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

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

Instead

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

I don't know why, but the change that made him great.

EDIT

The arbiter indicated that <a /> missing the href='#' attribute. Adding this attribute will also solve the problem.

Answer 2

For those who wish, here is another way to implement this without the Bootstrap JavaScript script.

Import 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; } 

And the fiddle - http://jsfiddle.net/KY5Mf/

Answer 3

I wanted to make it work with pure AngularJS and without further JavaScript library, and that turned out to be pretty simple. Only two changes are required, starting with the example here (bootstrap v3):

Instead

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

I used:

 <button type="button" class="navbar-toggle" ng-init="isCollapsed = true" ng-click="isCollapsed = !isCollapsed"> 

and instead

 <div class="collapse navbar-collapse"> 

I used:

 <div class="navbar-collapse" ng-class="{collapse: isCollapsed}"> 

Dropdowns

In addition, if you have drop-down menus in your navigation bar, the same applies to them, except that the css class does not "collapse" but "opens":

 <li class="dropdown" ng-class="{ open : dd1 }" ng-init="dd1 = false" ng-click="dd1 = !dd1"> 

Please note that for a few drop-down lists you will need all the necessary state variable in the angular root area (if you are not using a controller). Therefore, I called the first drop-down menu "dd1" here, it must be unique, otherwise several pop-up menus will open / close at the same time. (which is pretty funny, but rarely used).

Answer 4

No need to connect a controller. Just use ng-init instead to initialize the isCollapsed flag when the template is initially compiled.

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

Answer 5

Here is a working implementation using the ui.bootstrap.collapse module. 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 (using controllerAs syntax):

 (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; } } })(); 

Note. For animations to work in ui.bootstrap modules, you must enable ngAnimate.

Answer 6

If you are looking for Angular2 . Then a hit is a necessary change.

 <button type="button" class="navbar-toggle collapsed" (click)="toggleCollapse()" aria-expanded="false"> 

and the menu should look like this.

 <div class="navbar-collapse" id="bs-navbar-collapse" [class.collapse]="isCollapsed"> <ul class="nav navbar-nav"> <li> <a href=""> Dashboard 

Your controller should be something like this.

 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; } } 

See, this is relatively easy in Angular2 . thanks @yankee for the answer.

Answer 7

I feel this will be a simple JS fix:

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

If this code does not work correctly, make sure it is bound correctly, so put it in the controller that loads the page.

Answer 8

By simply adding jquery.min.js and bootstrap.min.js to the index.html file, this problem is resolved.

For collapsible navigation, we need to enable jquery.min.js and bootstrap.min.js