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 collap

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.

Answer 2

My particular issue revolved around scope. I'm using ng-repeat to loop through my menu items so navbarCollapsed wasn't accessable in the ng-repeat child scope.

The resolution was to access the parent scope's variables. Simple as:

ng-click="$parent.navbarCollapsed = !$parent.navbarCollapsed"

Hope this helps anybody having the same issue.