Twitter引导导航栏折叠功能不起作用

Question

我正在尝试实现响应式引导导航栏，但无法处理折叠状态。

一旦我调整窗口大小，我就会进入该按钮出现的状态：

当我点击这个按钮时，什么也没有发生。

下面我附上了我当前导航栏的代码。难道是div的命名错误？当我阅读文档时，它说需要折叠插件 - 这个插件不应该包含在 Angular 的标准引导程序中吗？

我也试过这个解决方案：https://stackoverflow.com/a/17672546——但是好像在collapse="isCollapsed"改变状态的时候没有效果。

<nav class="navbar navbar-default" role="navigation" >
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
        <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="#">My Application</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="navbar-collapse-1" ng-controller="HeaderController">
      <ul class="nav navbar-nav">
        <li ng-class="{ active: isActive('/logbook')}"><a href="#/logbook">Log Books</a></li>
        <li ng-class="{ active: isActive('/logentry')}"><a href="#/logentry">Logs</a></li>
      </ul>

      <ul class="nav navbar-nav navbar-right">
        <li ng-class="{ active: isActive('/logentry/create')}"><a href="#/logentry/create">Create Log</a></li>
        <li ng-class="{ active: isActive('/status')}"><a href="#/status">Show Status</a></li>
        <li ng-class="{ active: isActive('/statistics')}"><a href="#/statistics">Statistics</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Answer 1

如果您没有使用 twitter bootstrap 的 javascript，那么您可以使用 angular-ui bootstrap 的 collapse 指令来折叠您的导航栏。只需确保在.navbar-toggle 按钮上放置一个ng-click 指令即可否定折叠变量的当前值。将另一个ng-click 添加到.navbar-collapse 元素以在单击链接时折叠导航栏。

Here's a DEMO

    <body ng-click="collapse = false">
      <div class="navbar navbar-default" ng-click="$event.stopPropagation()">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" 
                        ng-click="collapse = !collapse">
                        <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">
                        Title
                    </a>
                </div>

                <div class="collapse navbar-collapse" 
                    ng-controller="HeaderController"
                    collapse="!$parent.collapse" ng-click="$parent.collapse = false">
                    <ul class="nav navbar-nav navbar-right">
                       <li><a href="">link</a></li>
                    </ul>
                </div>
            </div>
        </div>
      </body>

更新：

1 我注意到你在.navbar-collapse 项目中有一个ng-controller，因为ng-controller 创建了一个子范围，你必须使用collapse="!$parent.collapse" 和 ng-click="$parent.collapse = false" 在该元素本身内。上面的plunker已经更新了，看看吧。

2 作为旁注，您可以更进一步，在您的 html 正文中添加一个 ng-click="collapse = false" 以在用户单击导航栏外部时折叠导航栏，只需确保将 ng-click="$event.stopPropagation()" 添加到.navbar 元素以避免在用户单击 .navbar-toggle 时折叠它。

Answer 2

您的代码似乎没问题，请看这里http://jsbin.com/xinujuvi/1/edit

确保您已参考 bootstrap.min.js 脚本

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

Answer 3

请务必参考：

   ui-bootstrap-tpls-0.11.0.min.js 

您可以从their site下载它

这是代码：

 <nav class="navbar navbar-default" role="navigation" >
   <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle btn-danger" ng-click="isCollapsed = !isCollapsed">
        <span class="icon-bar btn-info"></span>
        <span class="icon-bar btn-info"></span>
        <span class="icon-bar btn-info"></span>
    </button>
    <a class="navbar-brand">YouSite</a>
</div>
<div class="navbar-collapse collapse" collapse="!isCollapsed" id="navbar-collapse-1" ng-controller="HeaderController">
  <ul class="nav navbar-nav">
    <li ng-class="{ active: isActive('/logbook')}"><a href="#/logbook">Log Books</a></li>
    <li ng-class="{ active: isActive('/logentry')}"><a href="#/logentry">Logs</a></li>
  </ul>

  <ul class="nav navbar-nav navbar-right">
    <li ng-class="{ active: isActive('/logentry/create')}"><a href="#/logentry/create">Create Log</a></li>
    <li ng-class="{ active: isActive('/status')}"><a href="#/status">Show Status</a></li>
    <li ng-class="{ active: isActive('/statistics')}"><a href="#/statistics">Statistics</a></li>
  </ul>
</div><!-- /.navbar-collapse -->