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 指令。这是您更新的代码 sn-p：

<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。正是您想要实现的目标。

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