Angular UI, Bootstrap Navbar Collapse and Javascript

Question

I have trouble with UI-Router in many ways. I don't understand how it interacts with other frameworks.

Namely, I am trying to implement Bootstrap 3's navbar collapse module, seen below:

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">   <div class="container">     <div class="navbar-header">       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-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" href="#">Project name test</a>     </div>     <div class="collapse navbar-collapse">       <ul class="nav navbar-nav">         <li class="active"><a href="#">Home</a></li>         <li><a href="#about">About</a></li>         <li><a href="#contact">Contact</a></li>       </ul>     </div><!--/.nav-collapse -->   </div> </div> 

This is straight from the Bootstrap website and it works fine when inside its own .html page.

The issue is when I insert it into a UI-Router view. The collapsing action no longer works -- I'm guessing because the "data-target" function is somehow unable to find its target.

How does one use Bootstrap 3 with Angular UI? The Angular UI Bootstrap package does not have a navbar module.

The answer below is good. Here is a reference URL Twitter Bootstrap Navbar with AngularJS - Collapse Not Functioning.

Answer 1

You should replace bootstrap native js properties with ui-bootstrap directives (note the ng-click and collapse):

<nav class="navbar navbar-default" role="navigation">     <!-- Brand and toggle get grouped for better mobile display -->     <div class="navbar-header">       <button type="button" class="navbar-toggle" ng-click="navbarCollapsed = !navbarCollapsed">         <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="#">         <!-- your branding here -->       </a>     </div>      <!-- Collect the nav links, forms, and other content for toggling -->     <div class="collapse navbar-collapse" collapse="navbarCollapsed">       <!-- your normal collapsable content here -->     </div> </nav> 

Set the initial value in your controller:

$scope.navbarCollapsed = true; 

Edit:

New versions of ui-bootstrap prefix all compontents. Adjust your code accordingly eg. collapse -> uib-collapse.