Angularjs引导下拉菜单不起作用

Posted 2023-02-19

【中文标题】Angularjs引导下拉菜单不起作用

【英文标题】：Angularjs bootstrap dropdown not working

【发布时间】：2014-09-19 03:41:48

【问题描述】：

对 angularjs 和 bootstrap 有点陌生。

我正在尝试添加一个简单的下拉菜单。但它不起作用。

尝试了建议@Bootstrap 3 simple dropdown not working。这也行不通。

<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" ui-sref="a">a<span class="caret"></span></a>
<ul class="dropdown-menu">
  <li><a ui-sref="a">a</a></li>
  <li><a ui-sref="b">b</a></li>
  <li><a ui-sref="c">c</a></li>
  <li><a ui-sref="d">d</a></li>
  <li><a ui-sref="e">e</a></li>
  <li><a ui-sref="f">f</a></li>
  <li><a ui-sref="g">g</a></li>
  <li><a ui-sref="h">h</a></li>
  <li><a ui-sref="i">i</a></li>         
  <li><a ui-sref="j">j</a></li>
  <li><a ui-sref="k">k</a></li>
</ul>
</li>

完整代码@http://plnkr.co/edit/uFDFOJfHjL5qY9nVEykq?p=preview

希望有人能帮助我。

【问题讨论】：

由于当前答案不再有效，也许@Pals 可以将所选答案切换为#2？

【参考方案1】：

注意：这里的大多数答案都已过时！主要问题是dropdown 指令不再可用作类，而只能用作属性，并且它已重命名为uib-dropdown。

我在这里被困了一段时间，但是将类更改为属性是一种魅力。

此外，您需要为每个指令使用 'uib-' 前缀而不是普通名称。

<li uib-dropdown>
    <a uib-dropdown-toggle>a<span class="caret"></span></a>
    <ul uib-dropdown-menu>
        <li><a ui-sref="a">a</a></li>
        <li><a ui-sref="b">b</a></li>
        <li><a ui-sref="c">c</a></li>
        <li><a ui-sref="d">d</a></li>
    </ul>
</li>

（当然，请确保您没有忘记在您的应用中包含 ui.bootstrap 模块。）

var app = angular.module('App', ['ui.router','ui.bootstrap']);

【讨论】：

请注意，从 1.0 版本开始，我们的所有指令都需要一个 uib- 前缀，并且由于命名空间冲突和本机浏览器元素，物理上移除了对旧指令名称的支持。跨度>

是的，你是对的。我要补充一点。否则，您会在控制台中收到弃用警告。

好吧，我的意思是，从 1.0 开始，已弃用的代码（和警告）都已删除，因此您将看不到它们，您的代码也将无法工作。双重打击。

这需要更新为新的正确答案。谢谢。

嗨@Pals，如果您同意Kode_12，您能否将已接受的答案移至此条目，而不是当前选择的答案（选票较少）？让 *** 成为一个更好的地方 :-)

【参考方案2】：

您需要在您的应用中包含ui.bootstrap 模块。

var app = angular.module('App', ['ui.router','ui.bootstrap']);

并从下拉触发器中删除ui-sref。

<a class="dropdown-toggle" data-toggle="dropdown" >a<span class="caret"></span></a>

Plnkr

【讨论】：

因为 ui.bootstrap 模块浪费了 30 分钟。 +1

@PSL 似乎是一个很好的机会来添加一些文档以帮助其他人避免同样的陷阱。

请注意，从 1.0 版本开始，我们的所有指令都需要一个 uib- 前缀，并且由于命名空间冲突和本机浏览器元素，物理上移除了对旧指令名称的支持。

请注意，此答案对 UI-Bootstrap 的最新版本无效，因为 uib-dropdown 需要是属性，而不是类。正如经常提到的 Github 问题 2156 中所讨论的那样。

此解决方案不适用于移动浏览器。移动浏览器@PSL 是否有任何替代解决方案？

【参考方案3】：

data-toggle="dropdown" 应该被删除。我想这会与ui.bootstrap 产生一些冲突

<li class="dropdown" uib-dropdown>
            <a aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" uib-dropdown-toggle href="" role="button">
              <span class="glyphicon glyphicon-flag"></span>
              Events
              <span class="caret"></span>
            </a>
            <ul class="uib-dropdown-menu" role="menu">
              <li>
                <a href="">Event 1</a>
              </li>
              <li>
                <a href="">Event 2</a>
              </li>
            </ul>

希望这会有所帮助。

【参考方案4】：

你需要在你的锚标签上添加on-toggle，以避免引导下拉角下拉类之间的冲突，这个问题是一个封闭的角UI（https://github.com/angular-ui/bootstrap/issues/2156）

【讨论】：

这是一个救命稻草，特别是如果您使用的是较旧的 Angular 示例代码。谢谢。

【参考方案5】：

我从here 找到了关于这个主题的一个很好的资源，因为我遇到了同样的问题。我将在下面概述我所做的。

下载ui bootstrap 将压缩文件移动到应用程序的目标目录，然后解压缩 找到最新版本的 ui bootstrap 版本，在我的例子中，它位于“bootstrap-gh-pages/ui-bootstrap-tpls-0.13.0.min.js” 在您的主 .html 文件中包含缩小的 js 文件： <script src='stylesheets/bootstrap-gh-pages/ui-bootstrap-tpls-0.13.0.min.js'></script> 返回Angular directives 并向下滚动到下拉部分。将他们的 javascript 复制到您的主 js 文件和 html 示例中并照常进行自定义

这就是为我做的。希望对遇到同样问题的其他人有所帮助。

【参考方案6】：

首先确保你的应用中包含了 ui.bootstrap 模块

var app = angular.module('App', ['other inclusions','ui.bootstrap']);

如果问题仍然存在，请不要使用 dropdown-toggle 和 dropdown 作为指令。而是用作类。即 class= 'dropdown-toggle' 等

例如：

<div class="dropdown dropdown-append-to-body">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle = "dropdown">Dropdown on Body <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
    </ul>
</div>

参考这个问题。 https://github.com/angular-ui/bootstrap/issues/2156

【参考方案7】：

制定了非常简单的解决方案（在尝试了很长时间之后）只需将“dropdown-toggle”指令添加到您的按钮

<button class="btn btn-primary " dropdown-toggle type="button">Drop Me Down<span class="caret"></span></button>

【参考方案8】：

嗯，我注意到需要在 li 元素中添加“下拉”属性，一旦添加，一切都会好起来的。

<li class="dropdown" dropdown>
   <a href="#" dropdown-toggle role="button" aria-haspopup="true" aria-expanded="false">... <span class="caret"></span></a>
   <ul class="dropdown-menu">
       ...
   </ul>
</li>

【参考方案9】：

对于 Angular 2：

添加 npm install ng2-bootstrap --save 然后按照 GITHUB 中的示例进行操作： https://github.com/valor-software/ng2-bootstrap/tree/development/demo/components/dropdown