angular-bootstrap 0.12.0导航栏下拉菜单不工作

Question

我使用的是AngularJS 1.3.10、Bootstrap 3.3.2和angular-ui-bootstrap 0.12.0。我也在使用Angular ui-router进行路由。在0.12.0中，导航栏下拉菜单似乎不起作用。回落到0.11.0是可行的。下面是我使用的代码(部分)：

​

	<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>	

​

Answer 1

他们添加了一个您现在必须使用的uib-dropdown和uib-dropdown-toggle指令。下面是您更新后的代码片段：

<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>

你可以在http://angular-ui.github.io/bootstrap/#/dropdown上看到一些例子

Answer 2

我认为你做错了。您使用的是Bootstrap，而不是UI-Bootstrap。下面是一个示例：

模板：

<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>

控制器：

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;
    };

});

看看这个项目：Angular Project Template。它是Angular 1.3，Bootstrap和UI Bootstrap。这正是你想要实现的目标。

确保所有内容都已正确安装，并且控制台中没有错误。