javascript - Angularjs Bootstrap 下拉菜单不起作用

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