为什么这个下拉菜单没有填充工作链接

Why isnt this drop down populating with working links?

本文关键字：填充 工作 链接 下拉菜单 为什么      更新时间：2023-09-26

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

这是一个重现问题的 plnkr，包括下面的代码。

以下是 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>

在你的例子中，你缺少 Bootstrap 的 JS 文件，以及 JQuery，这是 bootstrap 所必需的......尝试将以下内容添加到您的<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>

你在这里有几个问题：

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

下面是一个工作示例：plnkr.co

相关文章：