angularjs - 带有 angular-ui bootstrap 的响应式下拉导航栏(以正确的 Angular 方式完成)

Question

我使用 angular-ui-boostrap 的模块“ui.bootstrap.dropdownToggle”创建了一个带有下拉导航栏的 JSFiddle: http://jsfiddle.net/mhu23/2pmz5/

<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
    <div class="container"> <a class="brand" href="#">
                My Responsive NavBar
            </a>

        <ul class="nav">
            <li class="divider-vertical"></li>
            <li class="dropdown"> <a href="#" class="dropdown-toggle">
                        Menu 1 <b class="caret"></b>
                    </a>

                <ul class="dropdown-menu">
                    <li><a href="#/list">Entry 1</a>
                    </li>
                    <li><a href="#/list">Entry 2</a>
                    </li>
                </ul>
            </li>
          ....
        </ul>
    </div>
</div>
</div>

据我了解，这是实现此类下拉菜单的正确的、有 Angular 的方式。就 angularjs 而言，“错误”的方式是包含 bootstrap.js 并使用“data-toggle=”dropdown”...我在这儿吗？

现在我想向我的导航栏添加响应行为，如以下 Fiddle 中所示: http://jsfiddle.net/ghtC9/6/

但是，上述解决方案有一些我不喜欢的地方。这家伙包含了 bootstrap.js!

那么向我现有的导航栏添加响应行为的正确 Angular 方式是什么？

我显然需要使用引导响应式导航栏类，例如“nav-collapse crash navbar-responsive-collapse”。但我不知道如何...

非常感谢您的帮助!

提前谢谢您!迈克尔

Answer 1

更新 2015-06

基于antoinepairet's comment/example :

使用uib-collapse属性提供动画:http://plnkr.co/edit/omyoOxYnCdWJP8ANmTc6?p=preview

<nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header">

        <!-- note the ng-init and ng-click here: -->
        <button type="button" class="navbar-toggle" ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Brand</a>
    </div>

    <div class="collapse navbar-collapse" uib-collapse="navCollapsed">
        <ul class="nav navbar-nav">
        ...
        </ul>
    </div>
</nav>

<小时/>

古代..

我发现这个问题是围绕 BS2 提出的，但我想我应该根据 ui.bootstrap issue 394 中的建议，使用 ng 级解决方案为 Bootstrap 3 提供一个解决方案。 :

与 official bootstrap example 的唯一变化是添加注释所指出的 ng- 属性，如下:

<nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">

    <!-- note the ng-init and ng-click here: -->
    <button type="button" class="navbar-toggle" ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">Brand</a>
  </div>

  <!-- note the ng-class here -->
  <div class="collapse navbar-collapse" ng-class="{'in':!navCollapsed}">
  
    <ul class="nav navbar-nav">
    ...

这是一个更新的工作示例:http://plnkr.co/edit/OlCCnbGlYWeO7Nxwfj5G?p=preview (拉尔斯帽子提示)

这似乎在简单的用例中对我有用，但您会在示例中注意到第二个下拉菜单被切断。