Question

我第一次使用angular构建一个web应用程序，并使用bootstraps css（angular ui）。我正在使用bootstrap中的导航栏并使用ng-route路由到ng-templates。一切正常。

现在我想在导航栏中加入一个下拉按钮，我可以在其中找到一些额外的路由链接。我这样做了：

<nav class="navbar navbar-default navbar-static-top" role="navigation" ng-controller="NavigationCtrl">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" ng-click="nav.collapsed=!nav.collapsed">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="navbar-collapse navbar-right" collapse="nav.collapsed">
            <ul class="nav navbar-nav">
                <li>
                    <a href="#/index" ng-click="nav.collapsed=true">
                        <span class="glyphicon glyphicon-home"></span>
                        Home
                    </a>
                </li>
                <li class="dropdown">
                    <a href="" class="dropdown-toggle" data-toggle="dropdown">
                        <span class="glyphicon glyphicon-cog"></span>
                        Dropdown
                        <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu dropdown-toggle" data-toggle="dropdown" role="menu">
                        <li>
                            <a href="#/configA" ng-click="nav.collapsed=true">
                                <span class="glyphicon glyphicon-dashboard"></span>
                                ConfigA
                            </a>
                        </li>
                        <li>
                            <a href="#/configB" ng-click="nav.collapsed=true">
                                <span class="glyphicon glyphicon-dashboard"></span>
                                ConfigB
                            </a>
                        </li>
                        <li>
                            <a href="#/configC" ng-click="nav.collapsed=true">
                                <span class="glyphicon glyphicon-dashboard"></span>
                                ConfigC
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>

我的路线如下：

app.config(["$routeProvider", function ($routeProvider) {
    $routeProvider
        // route for the main page
        .when("/index", {
            templateUrl: "/index"
        })
        // route for the about page
        .when("/configA", {
            templateUrl: "/configA"
        })
        // route for the about page
        .when("/configB", {
            templateUrl: "/configB"
        })
        // route for the about page
        .when("/configC", {
            templateUrl: "/configC"
        })
        .otherwise({redirectTo: "/index"});
}])

我的模板在html头部中的脚本如下：

<script type="text/ng-template" id="/index">
    <div>
        <div class="jumbotron">
            <h1>Hello, world!</h1>
            <p>...</p>
            <p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p>
        </div>
    </div>
</script>

这适用于导航栏中的常规链接。但点击下拉列表中的链接不会工作，只是没有任何反应:(我在这里错过了什么吗？

Answer 1

您必须创建一个锚链接。

只需创建一个真正的链接，它应该可以正常工作：

<nav class="navbar navbar-default navbar-static-top" role="navigation" ng-controller="NavigationCtrl">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" ng-click="nav.collapsed=!nav.collapsed">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div>
    <div class="navbar-collapse navbar-right" collapse="nav.collapsed">
        <ul class="nav navbar-nav">
            <li>
                <a href="/index" ng-click="nav.collapsed=true">
                    <span class="glyphicon glyphicon-home"></span>
                    Home
                </a>
            </li>
            <li class="dropdown">
                <a href="" class="dropdown-toggle" data-toggle="dropdown">
                    <span class="glyphicon glyphicon-cog"></span>
                    Dropdown
                    <span class="caret"></span>
                </a>
                <ul class="dropdown-menu dropdown-toggle" data-toggle="dropdown" role="menu">
                    <li>
                        <a href="/configA" ng-click="nav.collapsed=true">
                            <span class="glyphicon glyphicon-dashboard"></span>
                            ConfigA
                        </a>
                    </li>
                    <li>
                        <a href="/configB" ng-click="nav.collapsed=true">
                            <span class="glyphicon glyphicon-dashboard"></span>
                            ConfigB
                        </a>
                    </li>
                    <li>
                        <a href="/configC" ng-click="nav.collapsed=true">
                            <span class="glyphicon glyphicon-dashboard"></span>
                            ConfigC
                        </a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</nav>

Answer 2

好像我必须删除＆＃34; dropdown-toggle＆＃34;来自下拉列表ul classlist以及data-toggle =＆＃34;下拉＆＃34;属性。现在它就像一个魅力：）

感谢您的回答：https://stackoverflow.com/a/18546378/2577116

从bootstraps导航栏下拉列表导航到角度页面模板

2 个答案: