Twitter bootstrap navbar collapse function not working

Question

I am trying to implement the responsive bootstrap navigation bar but having trouble handling the collapsed state.

Once I resize the window I get to the state where this button appears:

enter image description here

When I click this button nothing happens.

Below I attached my code for my current navigation bar. Could it be the naming of the divs that is wrong? When I read the documentation it says that the collapse plugin is required - shouldn't this plugin be included in the standard bootstrap for angular?

I also tried this solution: https://stackoverflow.com/a/17672546 - but it is as if when the state is changed in the collapse="isCollapsed" no effect is achieved.

<nav class="navbar navbar-default" role="navigation" >
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
        <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="#">My Application</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="navbar-collapse-1" ng-controller="HeaderController">
      <ul class="nav navbar-nav">
        <li ng-class="{ active: isActive('/logbook')}"><a href="#/logbook">Log Books</a></li>
        <li ng-class="{ active: isActive('/logentry')}"><a href="#/logentry">Logs</a></li>
      </ul>

      <ul class="nav navbar-nav navbar-right">
        <li ng-class="{ active: isActive('/logentry/create')}"><a href="#/logentry/create">Create Log</a></li>
        <li ng-class="{ active: isActive('/status')}"><a href="#/status">Show Status</a></li>
        <li ng-class="{ active: isActive('/statistics')}"><a href="#/statistics">Statistics</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

ryeballar · Accepted Answer · 2014-07-28T12:09:00.180

If you are not using twitter bootstrap's javascript then you can use angular-ui bootstrap's collapse directive to collapse your navbar. Just make sure to put an ng-click directive on the .navbar-toggle button to negate the current value of the collapse variable. Add another ng-click to the .navbar-collapse element to collapse the navbar when a link has been clicked.

Here's a DEMO

    <body ng-click="collapse = false">
      <div class="navbar navbar-default" ng-click="$event.stopPropagation()">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" 
                        ng-click="collapse = !collapse">
                        <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">
                        Title
                    </a>
                </div>

                <div class="collapse navbar-collapse" 
                    ng-controller="HeaderController"
                    collapse="!$parent.collapse" ng-click="$parent.collapse = false">
                    <ul class="nav navbar-nav navbar-right">
                       <li><a href="">link</a></li>
                    </ul>
                </div>
            </div>
        </div>
      </body>

UPDATE:

1 I noticed that you have an ng-controller within the .navbar-collapse item, since an ng-controller creates a child scope, you have to use collapse="!$parent.collapse" and ng-click="$parent.collapse = false" within that element itself. The plunker has been updated above, check it out.

2 As a side note, you can take it a step further and add an ng-click="collapse = false" within your html body to collapse the navbar when the user clicks outside of the navbar, just make sure to add ng-click="$event.stopPropagation()" to the .navbar element to avoid collapsing it while the user is clicking the .navbar-toggle.

score 1 · Answer 2 · answered Jul 28 '14 at 11:30

1

Your code seems to be fine please see here http://jsbin.com/xinujuvi/1/edit

make sure that you've got reference to bootstrap.min.js script

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

answered Jul 28 '14 at 11:30

sylwester

16,498
1
25
33

You shouldnt use bootstrap.min.js , when you are in angularJS – Milad Jul 28 '14 at 11:34
1

@xe4me For code posted by frozie bootstrap.js is required to make navbar works, how do you know that he wants to use bootstrap directive ? – sylwester Jul 28 '14 at 11:43
Because he literaly said this : I also tried this solution: http://stackoverflow.com/a/17672546 - but it is as if when the state is changed in the collapse="isCollapsed" no effect is achieved, which means he wants to use bootstrap directive! – Milad Jul 28 '14 at 11:45
I apologize if I was a bit vague; I already have `` shouldn't this be sufficient? – Nicklas Kevin Frank Jul 28 '14 at 11:48

score 0 · Answer 3 · answered Jul 28 '14 at 11:39

Make sure to referrence this :

   ui-bootstrap-tpls-0.11.0.min.js

You can download it from their site

And this is the code :

 <nav class="navbar navbar-default" role="navigation" >
   <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle btn-danger" ng-click="isCollapsed = !isCollapsed">
        <span class="icon-bar btn-info"></span>
        <span class="icon-bar btn-info"></span>
        <span class="icon-bar btn-info"></span>
    </button>
    <a class="navbar-brand">YouSite</a>
</div>
<div class="navbar-collapse collapse" collapse="!isCollapsed" id="navbar-collapse-1" ng-controller="HeaderController">
  <ul class="nav navbar-nav">
    <li ng-class="{ active: isActive('/logbook')}"><a href="#/logbook">Log Books</a></li>
    <li ng-class="{ active: isActive('/logentry')}"><a href="#/logentry">Logs</a></li>
  </ul>

  <ul class="nav navbar-nav navbar-right">
    <li ng-class="{ active: isActive('/logentry/create')}"><a href="#/logentry/create">Create Log</a></li>
    <li ng-class="{ active: isActive('/status')}"><a href="#/status">Show Status</a></li>
    <li ng-class="{ active: isActive('/statistics')}"><a href="#/statistics">Statistics</a></li>
  </ul>
</div><!-- /.navbar-collapse -->

Twitter bootstrap navbar collapse function not working

3 Answers3