71

I am using Angular and Twitter Bootstrap navbar and trying to get the collapse functionality to 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 -->

The navbar displays perfectly. The dropdowns work great. The Angular functions load the data and mark the specific items as active and populate the models perfectly. The only thing that doesn't work is the responsive collapse feature. When I resize the screen, the menu items disappear and the icon for the menu appears, but clicking on it does not work. I am stuck on this and I know it has to be a simple fix, but I just can't figure it out. Any help would be appreciated!

4
  • did you include Collapse.js from bootstrap i think it should be missing if still it does not work could you share jsfiddle Commented Feb 7, 2013 at 5:14
  • Word. It is included, and I used the plugin with an accordion on a different partial. Commented Feb 7, 2013 at 5:27
  • 1
    could you share fiddle for it Commented Feb 7, 2013 at 5:42
  • Figured it out, answered below. Commented Feb 8, 2013 at 19:20

8 Answers 8

103

For those interested - Here is another way of implementing this without Bootstrap's javascript.

Import Angular's 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/

4
  • 15
    Updated for Bootstrap 3.x - jsfiddle.net/z2hLy - worth noting that if you don't need the menu dropdowns, you only need to import ['ui.bootstrap.collapse']. Commented Feb 3, 2014 at 10:57
  • 1
    bs-js-navbar-collapse! The missing piece! Where's that documented? Commented Jul 24, 2015 at 7:20
  • 1
    FYI you need to use the uib-collapse directive instead of collapse now Commented Mar 27, 2016 at 15:13
  • Broken fiddle. Should be fixed. Commented Apr 23, 2018 at 19:58
82

I wanted to get it to work with pure AngularJS and no further JavaScript library and it turned out to be quite simple. There are only two changes needed starting with the example here (bootstrap v3):

Instead of

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

<div class="collapse navbar-collapse">

I used:

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

Dropdowns

Also, if you have any dropdown menus in your navbar, the same applies to them, except the css class is not 'collapse', but 'open':

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

Note that multiple dropdowns will all need their own state variable on the angular root scope (if you are not using a controller). Therefore I named the first dropdown 'dd1' here, they need to be unique, otherwise multiple dropdown will open/close at the same time. (which is pretty funny, but rarely usable).

10
  • This helped me out greatly, please add to your answer that this also works for the dropdowns in the NavBar. [li class="dropdown" ng-class="{ open : isDropDownCollapsed}" ng-init="isDropDownCollapsed = false" ng-click="isDropDownCollapsed = !isDropDownCollapsed"] Commented Aug 6, 2014 at 21:14
  • @GerbenRampaart: Please feel free to edit my answer.
    – yankee
    Commented Aug 6, 2014 at 23:13
  • it helped me a lot. Thank you! If you have to dropdowns (dd1 and dd2) and you want to close dd1 when opening dd2 you can do this by ng-click="dd2 = !dd2; dd1 = false" Commented Nov 19, 2014 at 20:48
  • This worked for me as well. I did not need to add anything to the controllers.
    – Kode
    Commented Dec 11, 2014 at 19:16
  • 4
    This worked great, but my menu wasn't automatically collapsing when a link was clicked. So I just moved the ng-click handler to a parent <div> that contained both the button and the menu items so that both clicking on the hamburger button or clicking on a link would collapse the menu.
    – Brad Rem
    Commented Feb 24, 2015 at 19:35
7

This was a tricky one. The docs showed one way, and it functions great. I copied the docs example (http://twitter.github.com/bootstrap/components.html#navbar) and tried using it. I then went to the examples page and tried the layout listed here: http://twitter.github.com/bootstrap/examples/fluid.html

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

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

Instead of

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

I don't know why, but changing that made it function great.

EDIT

Arbiter pointed out that the <a /> was missing the href='#' attribute. Adding that attribute would also solve the problem.

3
  • 3
    I think it's because your link was missing href="#" - so the default link behavior wasn't removed.
    – Arbiter
    Commented Feb 25, 2013 at 16:58
  • That is 100% correct now that I am looking at it. I will edit the answer and put that in. Thanks! If only you were around the day I asked the question I could have avoided a major headache. Commented Feb 25, 2013 at 17:07
  • 3
    I only appear when I'm no longer required.
    – Arbiter
    Commented Feb 26, 2013 at 14:51
7

No need to engage a controller. Just use ng-init instead to initialize the isCollapsed flag when 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>
7

If you are looking for Angular2. Then blow is the changes required.

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

and 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 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 to @yankee for the answer.

4

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 animation to work in ui.bootstrap modules, you must include ngAnimate.

0

I feel that this will be simple JS fix:

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

If this code is not working correctly then see that it's binding correctly, so place it in controller that loads page.

0

Just adding jquery.min.js and bootstrap.min.js to the index.html file solved this problem.

For collapsable navigation we need to include jquery.min.js and bootstrap.min.js

1
  • 1
    This is just wrong. It likely works, but this question is for Angular/Bootstrap not jQuery/Bootstrap, so your kinda steering the OP in the wrong direction. No need to introduce a dependency on jQuery for this. See noduck's and yankee's answers.
    – lostdorje
    Commented Jan 2, 2016 at 23:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.