为什么这个下拉列表没有填充工作链接？答案

【问题标题】：Why isnt this drop down populating with working links?为什么这个下拉列表没有填充工作链接？
【发布时间】：2016-05-10 15:48:14
【问题描述】：

我正在通过更改示例来研究引导程序。我试图创建的下拉菜单应该有三个链接。主选项卡应链接到someroute，而下拉菜单显示的两个链接应让用户分别单击route3 和route4。但取而代之的是一个死链接，应该有三个工作链接。 需要对以下代码进行哪些具体更改才能使菜单栏中的所有四个链接（包括下拉菜单中的三个）都正常工作？

这里是a plnkr that recreates the problem including the code below。

这里是 index.html，其中包含下拉菜单的引导代码：

<!DOCTYPE html>
<html>  
  <head>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-route.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
    <link href="style.css" rel="stylesheet"/>
    <style type="text/css">
    [ng\:cloak], [ng-cloak], .ng-cloak { display: none !important; }
    </style>
  </head>
  <body class="ng-cloak" ng-cloak="" ng-app="hello">
    <div class="container" ng-controller="navigation">
        <ul class="nav nav-pills" role="tablist">
            <li ng-class="{active:tab('home')}"><a href="/">Home</a></li>
            <li class="dropdown">
                <a ng-class="{active:tab('someroute')}" class="dropdown-toggle" data-toggle="dropdown" href="/someroute">Some route
                <span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li ng-class="{active:tab('route3')}"><a href="/route3">route three</a></li>
                    <li ng-class="{active:tab('route4')}"><a href="/route4">route four</a></li>
                </ul>
            </li>
        </ul>
    </div>
    <div class="container" ng-view=""></div>
    <script type="text/javascript" src="home.js"></script>
    <script type="text/javascript" src="someroute.js"></script>
    <script type="text/javascript" src="navigation.js"></script>
    <script type="text/javascript" src="script.js"></script>
  </body>
</html>

【问题讨论】：

标签： javascript angularjs twitter-bootstrap

【解决方案1】：

这里有几个问题：

您在 plnkr.co 上使用 html5Mode，根据我的经验，这不适用于路由，因为应用预览是在 iframe 中提供的
您将包含 Bootstrap 的 CSS，但不包含其 JavaScript（对于 Angular，您想改用 UI Bootstrap）
使用 UI Bootstrap 时，您需要使用自定义指令 uib-dropdown、uib-dropdown-toggle 和 uib-dropdown-menu 而不是这些类，因为 Angular 使用指令来处理 DOM 元素，而不是类选择器

这是一个工作示例：plnkr.co

【讨论】：

【解决方案2】：

您的示例中缺少 Bootstrap 的 JS 文件，以及 bootstrap 所需的 JQuery...尝试将以下内容添加到您的 <head>：

<script data-require="jquery@*" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

【讨论】：

此更改除了按照其他用户已删除答案的建议添加# 外，还解决了问题。查看更新的 plnkr：plnkr.co/edit/T96QWX1uEccH34l2Ievt?p=preview
您是否愿意评论如何让下拉菜单出现在悬停而不是点击时？这将节省一个单独的帖子。谢谢你和 +1。
当然，似乎 bootstrap 默认不支持它，但这里的第一个答案给出了一个非常简单的解决方案来自己做：stackoverflow.com/questions/16214326/…