Navbar didnt collapse with Angular

Question

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.

are you sure you added angular js script ? its not present in jsfiddle.. — Ramesh, Jul 30 '16 at 06:20
on my external resources i include bootstrap.min css, angular.js, ui-bootstrap-tpls.js sir — renat natanael, Jul 30 '16 at 06:22
did you use `ng-app` ?? also, bootstrap requires `jquery` for some functions like collapse. please post full code. — Paulo Galdo Sandoval, Aug 14 '16 at 17:26

score 0 · Answer 1 · answered Aug 14 '16 at 17:11

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.

score 0 · Answer 2 · answered Sep 16 '19 at 10:03

0

I think you need to add the class show on this part

 <div ng-class="collapse navbar-collapse" [ngClass]="{'show':!isCollapsed}">

answered Sep 16 '19 at 10:03

Jens Alenius

1,931
2
16
20

Navbar didnt collapse with Angular

2 Answers2