Angularjs bootstrap下拉列表无法正常工作

Question

对于angularjs和bootstrap来说有点新鲜.

我试图添加一个简单的下拉列表.但它没有用.

尝试了@ Bootstrap 3简单下拉不起作用的建议.那也行不通.

<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,以避免bootstrap下拉角下拉类之间发生冲突,这个问题在angular-ui上是关闭的(https://github.com/angular-ui/bootstrap/issues/2156)