1

I am using AngularJS 1.3.10 along with Bootstrap 3.3.2 and angular-ui-bootstrap 0.12.0. I am also using the Angular ui-router for routing. It seems like the navbar dropdown does not work in 0.12.0. Dropping back to 0.11.0 works. Here is the code that I am using (partial):

	<div class="navbar navbar-inverse navbar-fixed-top" role="navigation" ng-controller="searchController">
	    <div class="container-fluid">
	        <div class="navbar-header">
		    <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 ui-sref="dashboard" class="navbar-brand">My Application</a>
	        </div>
	        <ul class="nav navbar-nav navbar-right collapse navbar-collapse" collapse="navCollapsed" >
	            <li ><a ui-sref="dashboard" ng-click="navCollapsed = true"><i class="fa fa-bullseye"></i> Dashboard</a></li>
	            <li ><a ui-sref="topmenu1" ng-click="navCollapsed = true"><i class="fa fa-list"></i> Top Menu 1</a></li>
                    <li class="dropdown">
	                <a class="dropdown-toggle" data-toggle="dropdown">Dropdown
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">
        	            <li><a ui-sref="item1">Item 1</a></li>
    		            <li><a ui-sref="item2">Item 2</a></li>
    		            <li><a ui-sref="item3">Item 3</a></li>
                        </ul>
                    </li>
	        </ul>
	    </div>
	</div>	

1
  • And let me stress that the above code works fine in 0.10.0 and 0.11.0 of angular-ui-bootstrap. It stops working in 0.12.0, so I am wondering if there is an issue in 0.12.0 that has caused this to stop working. I have rolled my code back to use 0.11.0, but wanted to post the question in case there is a bug. Commented Jan 22, 2015 at 17:32

2 Answers 2

5

They added a uib-dropdown and uib-dropdown-toggle directive that you must use now. Here's your updated code snippet:

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation" ng-controller="searchController">
    <div class="container-fluid">
            <div class="navbar-header">
            <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 ui-sref="dashboard" class="navbar-brand">My Application</a>
            </div>
            <ul class="nav navbar-nav navbar-right collapse navbar-collapse" collapse="navCollapsed" >
            <li ><a ui-sref="dashboard" ng-click="navCollapsed = true"><i class="fa fa-bullseye"></i> Dashboard</a></li>
            <li ><a ui-sref="topmenu1" ng-click="navCollapsed = true"><i class="fa fa-list"></i> Top Menu 1</a></li>
            <!-- Notice the dropdown directive -->
            <li class="dropdown" uib-dropdown>
                <!-- Notice the dropdown-toggle directive -->
                <a class="dropdown-toggle" data-toggle="dropdown" uib-dropdown-toggle>Dropdown
                    <span class="caret"></span>
                </a>
                <ul class="dropdown-menu">
                        <li><a ui-sref="item1">Item 1</a></li>
                        <li><a ui-sref="item2">Item 2</a></li>
                        <li><a ui-sref="item3">Item 3</a></li>
                </ul>
            </li>
            </ul>
    </div>
</div>

You can see some examples at http://angular-ui.github.io/bootstrap/#/dropdown

Sign up to request clarification or add additional context in comments.

1 Comment

This is the answer I've been looking for. Thanks! As an update, use uib-dropdown and uib-dropdown-toggle now.
2

I think you are doing it wrong. What you are using is for Bootstrap and not UI-Bootstrap. Here is an example:

Template:

<div ng-controller="HeaderCtrl" class="navbar navbar-default navbar-static-top" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed">
                <span class="sr-only">Toggle navigation</span>
                <i class="fa fa-bars"></i>
            </button>
            <a class="navbar-brand" href="#/home">Project Title</a>
        </div>
        <div class="navbar-collapse collapse" collapse="navCollapsed" ng-click="navCollapsed=true">
            <ul class="nav navbar-nav navbar-right">
                <li ng-class="{ active: isActive('/home') }"><a href="#/home">Home</a></li>
                <li ng-class="{ active: isActive('/about') }"><a href="#/about">About</a></li>
            </ul>
        </div>
    </div>
</div>

Controller:

var app = angular.module('controllers.header', ['ngRoute', 'ui.bootstrap']);

app.controller("HeaderCtrl", function($scope, $location) {

    $scope.isActive = function (viewLocation) {
        var active = (viewLocation === $location.path());
        return active;
    };

});

Have a look at this project: Angular Project Template. It's Angular 1.3, Bootstrap and UI Bootstrap. Exactly what you are trying to achieve.

Make sure everything is installed properly and that there are no errors in the console.

3 Comments

That example is for collapsing the entire menu. I am simply trying to add a dropdown menu item to the top navbar. I will add the entire menu code to explain further.
The project's code fully satisfied my 2 days research, man you you saved my mental health!
@Stephane.P Glad it helped!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.