Responsive dropdown navbar with angular-ui bootstrap (done in the correct angular kind of way)

Question

I've created a JSFiddle with a dropdown navbar using angular-ui-boostrap's module "ui.bootstrap.dropdownToggle": http://jsfiddle.net/mhu23/2pmz5/

<div class="navbar navbar-fixed-top"> <div class="navbar-inner">     <div class="container"> <a class="brand" href="#">                 My Responsive NavBar             </a>          <ul class="nav">             <li class="divider-vertical"></li>             <li class="dropdown"> <a href="#" class="dropdown-toggle">                         Menu 1 <b class="caret"></b>                     </a>                  <ul class="dropdown-menu">                     <li><a href="#/list">Entry 1</a>                     </li>                     <li><a href="#/list">Entry 2</a>                     </li>                 </ul>             </li>           ....         </ul>     </div> </div> </div> 

As far as I understand this is the proper, angular kind of way to implement such a dropdown menu. The "wrong" way, in terms of angularjs, would be to include bootstrap.js and to use "data-toggle="dropdown"... Am I right here?

Now I'd like to add responsive behaviour to my navbar as done in the following Fiddle: http://jsfiddle.net/ghtC9/6/

BUT, there's something I don't like about the above solution. The guy included bootstrap.js!

So what would be the correct angular kind of way to add responsive behaviour to my existing navbar?

I obviously need to use bootstraps responsive navbar classes such as "nav-collapse collapse navbar-responsive-collapse". But I don't know how...

I'd really appreciate your help!

Thank you in advance! Michael

Answer 1

Update 2015-06

Based on antoinepairet's comment/example:

Using uib-collapse attribute provides animations: http://plnkr.co/edit/omyoOxYnCdWJP8ANmTc6?p=preview

<nav class="navbar navbar-default" role="navigation">     <div class="navbar-header">          <!-- note the ng-init and ng-click here: -->         <button type="button" class="navbar-toggle" ng-init="navCollapsed = true" 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>         <a class="navbar-brand" href="#">Brand</a>     </div>      <div class="collapse navbar-collapse" uib-collapse="navCollapsed">         <ul class="nav navbar-nav">         ...         </ul>     </div> </nav> 

---

Ancient..

I see that the question is framed around BS2, but I thought I'd pitch in with a solution for Bootstrap 3 using ng-class solution based on suggestions in ui.bootstrap issue 394:

The only variation from the official bootstrap example is the addition of ng- attributes noted by comments, below:

<nav class="navbar navbar-default" role="navigation">   <div class="navbar-header">      <!-- note the ng-init and ng-click here: -->     <button type="button" class="navbar-toggle" ng-init="navCollapsed = true" 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>     <a class="navbar-brand" href="#">Brand</a>   </div>    <!-- note the ng-class here -->   <div class="collapse navbar-collapse" ng-class="{'in':!navCollapsed}">      <ul class="nav navbar-nav">     ... 

Here is an updated working example: http://plnkr.co/edit/OlCCnbGlYWeO7Nxwfj5G?p=preview (hat tip Lars)

This seems to works for me in simple use cases, but you'll note in the example that the second dropdown is cut off… good luck!

Answer 2

You can do it using the "collapse" directive: http://jsfiddle.net/iscrow/Es4L3/ (check the two "Note" in the HTML).

        <!-- Note: set the initial collapsed state and change it when clicking -->         <a ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed" class="btn btn-navbar">            <span class="icon-bar"></span>            <span class="icon-bar"></span>            <span class="icon-bar"></span>         </a>         <a class="brand" href="#">Title</a>            <!-- Note: use "collapse" here. The original "data-" settings are not needed anymore. -->            <div collapse="navCollapsed" class="nav-collapse collapse navbar-responsive-collapse">               <ul class="nav"> 

That is, you need to store the collapsed state in a variable, and changing the collapsed also by (simply) changing the value of that variable.

---

Release 0.14 added a uib- prefix to components:

https://github.com/angular-ui/bootstrap/wiki/Migration-guide-for-prefixes

Change: collapse to uib-collapse.