下拉按钮确实按预期工作。答案

【问题标题】：Dropdown button does work as expected.下拉按钮确实按预期工作。
【发布时间】：2016-04-14 22:01:20
【问题描述】：

我是 HTML 和 Angular 的新手。这可能是一个简单的基本问题。我正在尝试使用基本的下拉按钮。在这个例子中。

http://jsfiddle.net/xkL15guj/

我正在尝试在 plunkr 中使用相同的示例。但是，当我尝试添加文件 bootstrap.min.js 时，我无法添加。你能帮我理解我在这里犯了什么错误吗？

https://plnkr.co/edit/YfgD9G?

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
 <div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

谢谢。

【问题讨论】：

标签： html angularjs angular-ui-bootstrap plunker

【解决方案1】：

要添加引导程序，您需要添加 jquery：

当我查看您的 plunker 时，您需要在脚本调用顶部进行调整（在角度之前）：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

和

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

我在这里有一个 plunker 示例：https://plnkr.co/edit/Kpy4s0RdFFu5hqgnKm9h?p=preview

还要注意，您引用的引导 png 是“阻止加载混合活动内容”

现在在 Firefox 23 中默认阻止混合活动内容！

什么是混合内容？

当用户访问通过 HTTP 提供的页面时，他们的连接会被打开以进行窃听和中间人 (MITM) 攻击。当用户访问通过 HTTPS 提供的页面时，他们与 Web 服务器的连接会通过 SSL 进行身份验证和加密，从而免受窃听者和 MITM 攻击。

但是，如果 HTTPS 页面包含 HTTP 内容，则攻击者可以读取或修改 HTTP 部分，即使主页是通过 HTTPS 提供的。当 HTTPS 页面包含 HTTP 内容时，我们称该内容为“混合”。用户正在访问的网页只是部分加密，因为某些内容是通过 HTTP 未加密检索的。混合内容阻止程序阻止 HTTPS 页面上的某些 HTTP 请求。

要禁用阻止混合内容：

如果您需要显示混合内容，您可以轻松做到：

单击地址栏中的屏蔽图标混合内容屏蔽，然后从下拉菜单中选择禁用此页面上的保护。

地址栏中的图标将变为橙色警告三角形警告标识图标，以提醒您正在显示不安全的内容。

要恢复之前的操作（重新阻止混合内容），只需重新加载页面即可。

【讨论】：

【解决方案2】：

这是因为您没有在应用程序中添加 bootstrap.js 文件和 jQuery.js 文件。

<!DOCTYPE html>
<html>

<head>
  <link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
  <link data-require="bootstrap-glyphicons@*" data-semver="3.2.1" rel="stylesheet" href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/img/glyphicons-halflings.png" />
  <script data-require="angular.js@1" data-semver="1.5.3" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
  <script data-require="jquery@*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <script data-require="ui-bootstrap@*" data-semver="1.1.1" src="https://cdn.rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-1.1.1.js"></script>
  <script data-require="ui-bootstrap-tpls-0.12.0.min.js@*" data-semver="0.12.1" src="https://raw.githubusercontent.com/angular-ui/bootstrap-bower/0.12.1/ui-bootstrap-tpls.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
  <h1>Hello Plunker!</h1>
  <div class="btn-group">
    <button type="button" class="btn btn-danger">Action</button>
    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
      <span class="caret"></span>
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </div>
</body>

</html>

【讨论】：