32

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.

Community
  • 1
  • 1
Union find
  • 7,759
  • 13
  • 60
  • 111

2 Answers2

68

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.

user2847643
  • 2,893
  • 14
  • 22
  • Could you explain to me what's happening in the backend which requires this? Is Ui-router overriding bootstrap.js's functions? – Union find May 23 '14 at 16:57
  • 3
    Actually ui-router has nothing to do with this. You need to include ui-bootstrap in your project if you didn't already. You do _not_ need any js files from the original twitter bootstrap distribution at all - they can be replaced by pure angular directives from ui-bootstrap. – user2847643 May 23 '14 at 17:18
  • Ok then what is causing the bootstrap.js to no longer function and need UI-bootstrap? Is it Angular itself? – Union find May 23 '14 at 18:38
  • By the way, this does work except the controller needs to be added to a surrounding Div. – Union find May 23 '14 at 18:55
  • My previous question is about what's happening under the hood not a preference. – Union find May 23 '14 at 19:39
  • 14
    It may be a little more readable to set the navbarCollapsed on the element, rather than in the controller. You can add ... ng-init="navbarCollapsed=true" ... to the collapse – Dustin Aug 01 '14 at 12:19
  • 4
    Also, adding `ng-click="navbarCollapsed = !navbarCollapsed"` to the links inside the `
     – Grant Lindsay Dec 12 '14 at 00:07
  • 1
    In ui-bootstrap 0.12.0 dropdown's in navbar are broken. 0.11.0 works fine. – Dirk Mar 01 '15 at 09:08
  • 2
    @GrantLindsay i can't get ng-click to fire on any of the links in my bootstrap-ui navbar. i'm using ui-sref, could this be why? you can see my code running at http://oscil.io – dcunited001 May 05 '15 at 21:03
  • 1
    also, i have tried adding `ng-click="navbarCollapsed = !navbarCollapsed"` to either of the `
  • ` and `` elements inside my `
    ` element, but to no avail.
    • – dcunited001 May 06 '15 at 16:45
  • 1
    @dcunited001 Can you post a minimal, working subset of your code to Plunkr or JSFiddle? – Grant Lindsay May 06 '15 at 21:50
  • I have this, and the _button_ works, but, as opposed to bootstrap's "way", it won't *auto* collapse because the flag won't let it! – Daniel C. Sobral Jul 24 '15 at 06:58
  • Seems that to the links inside the
    not only we need to add ng-click="navbarCollapsed = !navbarCollapsed;" But also "$state.go ('state_name');" to go that state, otherwise the menu collapses without going to the state.
     – Arup Saha Aug 20 '15 at 19:35
  • 1
    Nice and elegant solution! – milovanderlinden Sep 18 '15 at 08:35
  • 2
    With latest version of ui-boostrap (1.1.1) you need to use 'uib-collapse' instead of 'collapse'. ` – christophersw Jan 27 '16 at 21:13
  • 1
    @christophersw thanks for pointing this out! Added a short note about it. – user2847643 Jan 30 '16 at 21:52