CODEWITHSUNDEEP
angularjstwitter-bootstrap-3
user3181983
user3181983

Reputation: 153

Bootstrap: collapsable navbar doesn't work

I have a webapp built with yeoman gulp-angular generator that uses bootstrap (with sass).

I have a collapsable navbar. When I click on the button with the 3 icon-bars, the menu is not displayed as expected.

I've tested my html apart and it works fine. Fiddle that works is: http://jsfiddle.net/7tzj3y5n/.

Code is:

<nav class="navbar navbar-default navbar-inverse navbar-static-top navbar-inverse-main" role="navigation">
  <div class="container">

    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigationbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <p class="navbar-brand">Merchandising Control</p>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse navbar-menu" id="navigationbar">
        <ul class="nav navbar-nav navbar-right">
        <!-- Airline code label -->
            <li><a href="#">Airline:</a></li>

        <!-- Airline code dropdown -->
            <li class="dropdown" dropdown>
          <a class="dropdown-toggle" dropdown-toggle>{{MainCtrl.getAirlineCode()}} <span class="caret"></span></a>
          <ul class="dropdown-menu dropdown-menu-main">
            <li ng-repeat="airlineCode in MainCtrl.MAIN_UI_CONSTANTS().airlineCodes" ng-click="MainCtrl.setAirlineCode(airlineCode)">
                <a>{{airlineCode.value}}</a>
            </li>
          </ul>
        </li>
        </ul>
    </div> <!-- /.navbar-collapse -->

  </div> <!-- /.container-fluid -->
</nav>

It seems that my installation is not correct.

Could someone help me ?

Regards.

Upvotes: 0

Views: 1379

Answers (1)

Christina
Christina

Reputation: 3732

While Bootstrap's js uses data-* attributes on your HTML elements to enable expand / collapse on the navbar, Angular UI Bootstrap (which is what you should be using instead of Bootstrap's js when you have an Angular application) does not work exactly the same way. You can see Angular UI Bootstrap's documentation on Collapse to see how it works, however what you should be doing in short is the following:

  1. Remove Boostrap's js and include Angular UI Bootstrap js an add 'ui.bootstrap' as a dependency of your Angular module (if you haven't already).
  2. Update your HTML to use Angular UI Bootstrap's collapse, ie. something like the following:

<nav class="navbar navbar-default navbar-inverse navbar-static-top navbar-inverse-main" role="navigation" ng-init="navCollapsed = true" >
      <div class="container"> 
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" ng-click="navCollapsed = !navCollapsed">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <p class="navbar-brand">Merchandising Control</p>
        </div>
    
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse navbar-menu" collapse="navCollapsed">
            <ul class="nav navbar-nav navbar-right">
            <!-- Airline code label -->
                <li><a href="#">Airline:</a></li>
    
            <!-- Airline code dropdown -->
                <li class="dropdown" dropdown>
              <a class="dropdown-toggle" dropdown-toggle>{{MainCtrl.getAirlineCode()}} <span class="caret"></span></a>
              <ul class="dropdown-menu dropdown-menu-main">
                <li ng-repeat="airlineCode in MainCtrl.MAIN_UI_CONSTANTS().airlineCodes" ng-click="MainCtrl.setAirlineCode(airlineCode)">
                    <a>{{airlineCode.value}}</a>
                </li>
              </ul>
            </li>
            </ul>
        </div> <!-- /.navbar-collapse -->
    
      </div> <!-- /.container-fluid -->
    </nav>

What this code actually does is use the navCollapsed angular variable to control the menu's expand / collapse.

Upvotes: 2

Related Questions