[javascript] Angularjs引导下拉不起作用


Answers

注意:这里的大多数答案已经过时了! 主要的问题是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']);
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

希望有人能帮助我。







首先确保你的应用程序中包含了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




那么,我注意到,属性“下拉”需要添加到李元素,一旦添加,一切都会好起来的。

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



Links