skip to Main Content

I’m trying to use bootstrap.css with Angular. I referenced Twitter Bootstrap Navbar with AngularJS – Collapse Not Functioning but when I try to implement this code, my navbar doesn’t collapse and the dropdown doesn’t work either.

Code:

<nav id="navbar-example" class="navbar navbar-inverse navbar-static" role="navigation" ng-controller="NavBarCtrl">
  <div class="container-fluid">
    <div class="navbar-header">
      <button class="navbar-toggle" type="button" ng-click="isCollapsed = !isCollapsed">
        <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="#">Title</a>
    </div>
    <div collapse="isCollapsed" class="navbar-collapse bs-js-navbar-collapse">
      <ul class="nav navbar-nav">
      <li><a href="">home</a></li>
        <li class="dropdown">
          <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
          <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
            <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
          </ul>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li id="fat-menu" class="dropdown">
          <a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 3 <b class="caret"></b></a>
          <ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
            <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.nav-collapse -->
  </div><!-- /.container-fluid -->
</nav>

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

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

Why won’t it collapse? Here’s the JSFiddle.

2

Answers


  1. Have you checked in the developer tool? It is showing

    https://fiddle.jshell.net/code.angularjs.org/1.2.9/angular.js Failed to load resource: the server responded with a status of 404 (Not Found)
    
    ui-bootstrap-tpls.js:7 Uncaught ReferenceError: angular is not defined
    

    Because angular wasn’t able to load hence angular bootstrap is not able to initial as well.

    So please try to add another angular cdn and test.

    Login or Signup to reply.
  2. I think you need to add the class show on this part

     <div ng-class="collapse navbar-collapse" [ngClass]="{'show':!isCollapsed}">
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search