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
Have you checked in the developer tool? It is showing
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.
I think you need to add the class
show
on this part