Question

我尝试使用uib-dropdown指令向导航栏添加一个简单的下拉导航，但我能得到的只是在主导航下显示的下拉列表。这类实现的文档中没有示例，但看起来应该非常简单。

这是显示行为和我的代码的plnkr。

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#/home">angular-gmap-gplace</a>
    </div>

    <ul class="nav navbar-nav pull-right">
      <li class="active" uib-dropdown>
        <a id="dDrop" uib-dropdown-toggle>Directive<span class="caret"></span></a>                                         
        <ul uib-dropdown-menu role="menu" aria-labelledby="dDrop">
          <li role="menuitem">
            <a href="#">Multiple</a>
          </li>
        </ul>
      </li>
    </ul>

  </div>
</nav>

Answer 1

您需要包含ng-app属性以及将ui.bootstrap模块添加到app模块。我分叉你的plunker并在script.js文件中做了一些小改动。我还将ng-app属性添加到index.html plunker

 <body ng-app='app'>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#/home">angular-gmap-gplace</a>
    </div>

    <ul class="nav navbar-nav pull-right">
      <li class="active" uib-dropdown>
        <a id="dDrop" uib-dropdown-toggle>Directive                                          <span class="caret"></span>
        </a>
        <ul uib-dropdown-menu role="menu" aria-labelledby="dDrop">
          <li role="menuitem">
            <a href="#">Multiple</a>
          </li>
        </ul>
      </li>
    </ul>

  </div>
</nav>

<h1>uib-dropdown in navbar</h1>

script.js
angular.module('app',['ui.bootstrap']);

uib-dropdown无法在navbar中运行

1 个答案: