Question

这是我的html文件。我将此文件添加到ng-view。但下降似乎不起作用。

<button style="background-color: transparent; border: none" class="dropdown-toggle" data-toggle="dropdown" type="button">Admin
  <span class="caret"></span>
  <ul class="dropdown-menu">
    <li><a role="menuitem" tabindex="-1" href="#">Logout</a></li>
  </ul>
</button>

这些是我的应用程序所需的必要的css和js文件。我有一个单页应用程序，所以我使用ng-view

在上面添加了html代码

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.1.412/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.1.412/js/kendo.all.min.js"></script>
<script src="/javascripts/vendor/angular-route.js"></script>
<script src="/javascripts/app.js"></script>
<script src="/javascripts/commons/constants.js"></script>
<!-- Directives scripts -->

<script src="/javascripts/directives/passwordpattern.js"></script>
<script src="/javascripts/directives/passwordstrength.js"></script>

<!-- Scripts for authentication-->
<script src="/javascripts/services/AuthService.js"></script>
<script src="/javascripts/controllers/AuthController.js"></script>

<!-- Scripts for Trucks -->
<script src="/javascripts/services/TruckService.js"></script>
<script src="/javascripts/controllers/TrucksController.js"></script>
<!-- Scripts for customers -->
<script src="/javascripts/services/CustomerService.js"></script>
<script src="/javascripts/controllers/customersController.js"></script>
<!-- Scripts for Admin -->
<script src="/javascripts/controllers/AdminController.js"></script>

<!--<script data-main="/javascripts/main.js" src="/javascripts/vendor/require-2.2.0.js"></script>-->

<!-- Stylesheets -->
<link rel='stylesheet' href='/stylesheets/style.css'/>
<link rel="shortcut icon" href="https://cdn1.iconfinder.com/data/icons/smallicons-logotypes/32/amazon-16.png"/>
<!-- <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css"/>-->
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.mobile.all.min.css"/>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.412/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.412/styles/kendo.material.min.css" />

<!-- <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>-->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zxcvbn/4.2.0/zxcvbn.js"></script>

Answer 1

据“LiborZahrádka”报道，你需要包含bootstrap javascript库：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.1.412/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.1.412/js/kendo.all.min.js"></script>
<script src="/javascripts/vendor/angular-route.js"></script>
<script src="/javascripts/app.js"></script>
<script src="/javascripts/commons/constants.js"></script>
<!-- Directives scripts -->

<script src="/javascripts/directives/passwordpattern.js"></script>
<script src="/javascripts/directives/passwordstrength.js"></script>

<!-- Scripts for authentication-->
<script src="/javascripts/services/AuthService.js"></script>
<script src="/javascripts/controllers/AuthController.js"></script>

<!-- Scripts for Trucks -->
<script src="/javascripts/services/TruckService.js"></script>
<script src="/javascripts/controllers/TrucksController.js"></script>
<!-- Scripts for customers -->
<script src="/javascripts/services/CustomerService.js"></script>
<script src="/javascripts/controllers/customersController.js"></script>
<!-- Scripts for Admin -->
<script src="/javascripts/controllers/AdminController.js"></script>

<!--<script data-main="/javascripts/main.js" src="/javascripts/vendor/require-2.2.0.js"></script>-->

<!-- Stylesheets -->
<link rel='stylesheet' href='/stylesheets/style.css'/>
<link rel="shortcut icon" href="https://cdn1.iconfinder.com/data/icons/smallicons-logotypes/32/amazon-16.png"/>
<!-- <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css"/>-->
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.mobile.all.min.css"/>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.412/styles/kendo.common-material.min.css"/>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.412/styles/kendo.material.min.css"/>




<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>



<div class="dropdown">
    <button style="background-color: transparent; border: none" class="dropdown-toggle" data-toggle="dropdown"
            type="button">Admin
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a role="menuitem" tabindex="-1" href="#">Logout</a></li>
    </ul>
</div>

TextView

Answer 2

以这种方式使用：

    <div class="dropdown">
        <button style="background-color: transparent; border: none" class=dropdown-toggle" data-toggle="dropdown" type="button" >Admin
                <span class="caret"></span> 
       </button>
       <ul class="dropdown-menu">
              <li><a role="menuitem" tabindex="-1" href="#">Logout</a></li>
       </ul>
   </div>

下拉引导程序不起作用

2 个答案: