Angularjs引导下拉菜单不起作用

Question

对 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

希望有人能帮助我。

Answer 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']);

Answer 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

Answer 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>

希望这会有所帮助。

Answer 4

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

Answer 5

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

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

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

Answer 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

Answer 7

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

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

Answer 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>

Answer 9

对于 Angular 2：

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