响应式下拉导航栏，带有angular-ui引导程序（以正确的角度方式完成）

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>

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

现在，我想像下面的小提琴一样向我的导航栏添加响应行为：http :
//jsfiddle.net/ghtC9/6/

但是，我不喜欢上述解决方案。这个家伙包括bootstrap.js！

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

我显然需要使用引导响应的navbar类，例如“ nav-collapse折叠navbar-响应-折叠”。可是我不知道

非常感谢您的帮助！

先感谢您！麦可

Answer 1

您可以使用“折叠”指令进行此操作：http :
//jsfiddle.net/iscrow/Es4L3/
（选中HTML中的两个“注释”）。

        <!-- Note: set the initial collapsed state and change it when clicking -->
        <a ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed" class="btn btn-navbar">
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
        </a>
        <a class="brand" href="#">Title</a>
           <!-- Note: use "collapse" here. The original "data-" settings are not needed anymore. -->
           <div collapse="navCollapsed" class="nav-collapse collapse navbar-responsive-collapse">
              <ul class="nav">

也就是说，您需要将折叠状态存储在变量中，并且还可以通过（简单地）更改该变量的值来更改折叠状态。

版本0.14uib-向组件添加了前缀：

https://github.com/angular-ui/bootstrap/wiki/Migration-guide-for-
prefixes

更改collapse为uib-collapse。