具有angular-ui bootstrap的响应式下拉导航栏(以正确的角度方式完成)

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!

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

我显然需要使用bootstraps响应式导航栏类,例如"nav-collapse collapse navbar-responsive-collapse".但我不知道怎么......

我真的很感谢你的帮助!

先感谢您!迈克尔

Answer 1

更新2015-06

基于antoinepairet的评论/示例:

使用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问题394中的建议,使用ng-class解决方案为Bootstrap 3提供解决方案:

官方bootstrap示例的唯一变化是添加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(帽子尖Lars)

这似乎对我来说在简单的用例中很有用,但你会在示例中注意到第二个下拉列表被切断了......祝你好运!

Answer 2

您可以使用"collapse"指令来执行此操作: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.14 uib-为组件添加了前缀:

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

改变:collapse到uib-collapse.

Answer 3

不确定是否有人有相同的响应问题,但它只是一个简单的CSS解决方案对我来说.

同样的例子

...  ng-init="isCollapsed = true" ng-click="isCollapsed = !isCollapsed"> ...
...  div collapse="isCollapsed"> ...

同

@media screen and (min-width: 768px) {
    .collapse{
        display: block !important;
    }
}