Question

我正在通过更改示例来学习bootstrap。我尝试创建的下拉菜单应该有三个链接。主要标签应链接到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>

Answer 1

您在示例中缺少Bootstrap的JS文件，以及引导程序所需的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>

Answer 2

这里有一些问题：

您在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 个答案: