带有AngularJS的Twitter Bootstrap Navbar-折叠不起作用

71

我正在使用Angular和Twitter Bootstrap导航栏，并尝试使折叠功能正常工作。

部分：program.html

<div class="navbar navbar-inverse navbar-static-top" ng-include="'partials/navbar.html'" ng-controller="NavbarCtrl"></div>

部分：navbar.html

<div class="navbar-inner">
    <div class="container">
        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </a>
        <a class="brand" href="#">Short Course</a>
        <div class="nav-collapse collapse">
            <ul class="nav">
                <li><a href="#"><i class="icon-home icon-white"></i> Home</a></li>
                <li class="dropdown ng-class: settingsActive;">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Intro <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a onclick='$("#myModal").modal("show");'>User Info</a></li>
                        <li><a href="#/setup">Settings</a></li>
                        <li><a href="#/get-started">Getting started</a></li>
                    </ul>
                </li>
                <li class="dropdown ng-class: programActive;" ng-controller="ProgramCtrl">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Lessons <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li ng-repeat='o in lessonTypes'>
                            <a href="#/program/{{o.value}}">{{o.title}}</a>
                        </li>
                        <li class="divider"></li>
                        <li><a href="#/freeform">Free Form</a></li>
                    </ul>
                </li>
                <li class="dropdown ng-class: reportsActive;">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Grades <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Simple Report</a></li>
                        <li><a href="#">Comprehensive Report</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Current Grade Report</a></li>
                        <li><a href="#">Final Grade Report</a></li>
                    </ul>
                </li>
            </ul>
            <ul class="nav pull-right">
                <li><a href="#/class"><i class="icon-upload icon-white"></i> Upload/Save</a></li>
                <li><a href="#/class"><i class="icon-off icon-white"></i> Save/Logout</a></li>
            </ul>
        </div><!-- /.nav-collapse -->
    </div>
</div><!-- /navbar-inner -->

导航栏显示完美。下拉菜单效果很好。Angular函数加载数据并将特定项目标记为活动状态，并完美填充模型。唯一不起作用的是响应折叠功能。当我调整屏幕大小时，菜单项消失，并且出现菜单图标，但是单击它不起作用。我对此固执己见，我知道它必须是一个简单的修复程序，但我无法弄清楚。任何帮助，将不胜感激！

twitter-bootstrap  angularjs 
— 蒂姆·威瑟斯
source
您是否包含了bootstrap中的Collapse.js我认为如果您仍然可以共享jsfiddle，它仍然不起作用应该会丢失
— Ajay Beniwal
字。它包括在内，并且我在另一部分上使用了带有手风琴的插件。
— 蒂姆·威瑟斯
1
您能为此分享小提琴吗
— Ajay Beniwal
想通了，下面回答。
— 蒂姆·威瑟斯

Answers:

103

对于那些感兴趣的人-这是没有Bootstrap javascript的另一种实现方法。

导入Angular的UI-Bootstrap。

HTML：

<div class="navbar navbar-inverse" ng-controller="NavBarCtrl">
<div class="navbar-inner">
    <div class="container">
        <button class="btn btn-navbar" ng-click="isCollapsed = !isCollapsed"> 
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
        </button> <a class="brand" href="#">Short Course</a>
        <div class="nav-collapse" uib-collapse="isCollapsed">
            <ul class="nav">
                <li><a href="#"><i class="icon-home icon-white"></i> Home</a>
                </li>
                <li><a href="#">Lessons</a>
                </li>
                <li><a href="#">Grades</a>
                </li>
            </ul>
            <ul class="nav pull-right">
                <li><a href="#/class"><i class="icon-upload icon-white"></i> Upload/Save</a>
                </li>
                <li><a href="#/class"><i class="icon-off icon-white"></i> Save/Logout</a>
                </li>
            </ul>
        </div>
        <!-- /.nav-collapse -->
    </div>
</div>
<!-- /navbar-inner -->
</div>

JS：

var myApp = angular.module('myApp', ['ui.bootstrap']);

function NavBarCtrl($scope) {
    $scope.isCollapsed = true;
}

和小提琴-http: //jsfiddle.net/KY5Mf/

— 肖恩·麦克洛里（Sean McClory）
source
谢谢。完美运作：)
— 尼尔（Neil）
15
为Bootstrap 3.x更新了-jsfiddle.net/z2hLy-值得注意的是，如果不需要菜单下拉菜单，则只需导入['ui.bootstrap.collapse']。
— 肖恩·麦克卢里
你是我的救星。谢谢！
— Artiom
1
bs-js-navbar-collapse！丢失的那一块！记录在哪里？
— Daniel C. Sobral
1
仅供参考，您需要使用的uib-collapse指令，而不是collapse现在
— 尼国
82

我想让它与纯AngularJS一起使用，而不再需要其他JavaScript库，事实证明它很简单。从此处的示例（bootstrap v3）开始，仅需要进行两项更改：

代替

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

我用了：

<button type="button" class="navbar-toggle" ng-init="isCollapsed = true" ng-click="isCollapsed = !isCollapsed">

而不是

<div class="collapse navbar-collapse">

我用了：

<div class="navbar-collapse" ng-class="{collapse: isCollapsed}">

下拉菜单

另外，如果您的导航栏中有任何下拉菜单，则这些菜单同样适用，除​​了css类不是“ collapse”，而是“ open”：

<li class="dropdown" ng-class="{ open : dd1 }" ng-init="dd1 = false" ng-click="dd1 = !dd1">

请注意，多个下拉菜单都需要在角根范围内具有自己的状态变量（如果您未使用控制器）。因此，我在这里将第一个下拉列表命名为“ dd1”，它们必须是唯一的，否则多个下拉列表将同时打开/关闭。（这很有趣，但很少使用）。

— 扬基
source
这极大地帮助了我，请补充您的答案，这也适用于NavBar中的下拉菜单。[li class =“ dropdown” ng-class =“ {open：isDropDownCollapsed}” ng-init =“ isDropDownCollapsed = false” ng-click =“ isDropDownCollapsed =！isDropDownCollapsed”]
— Gerben Rampaart 2014年
@GerbenRampaart：请随时编辑我的答案。
— 洋基
这对我帮助很大。谢谢！如果您必须下拉菜单（dd1和dd2），并且想在打开dd2时关闭dd1，则可以通过ng-click =“ dd2 =！dd2; dd1 = false”来做到这一点
— Daniel Budick 2014年
这也为我工作。我不需要向控制器添加任何内容。
— 科德2014年
4
效果很好，但是单击链接时我的菜单没有自动折叠。因此，我只是将ng-click处理程序移到了一个<div>既包含按钮又包含菜单项的父对象，以便单击汉堡包按钮或单击链接都将折叠菜单。
— 布拉德·雷姆
7

这是一个棘手的问题。该文档显示了一种方法，并且功能强大。我复制了文档示例（http://twitter.github.com/bootstrap/components.html#navbar）并尝试使用它。然后，我转到示例页面并尝试了此处列出的布局：http : //twitter.github.com/bootstrap/examples/fluid.html

唯一的一个区别是<button>，而不是<a>

<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">

代替 

<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">

我不知道为什么，但是更改它使其功能很棒。

编辑

仲裁者指出<a />缺少href='#'属性。添加该属性也可以解决该问题。

— 蒂姆·威瑟斯
source
3
我认为这是因为您的链接缺少href =“＃”-因此未删除默认链接行为。
— 仲裁者
现在我正在查看，这是100％正确的。我将编辑答案并将其放入。谢谢！如果只有您在一天中，我会问这个问题，我本可以避免头疼。
— 蒂姆·威瑟斯
3
我只会在不再需要时出现。
— 仲裁者2013年
6

无需聘请控制器。最初编译模板时，仅使用ng-init代替初始化isCollapsed标志。

<div class="navbar navbar-inverse" ng-controller="NavBarCtrl">
<div class="navbar-inner">
    <div class="container">
        <button class="btn btn-navbar" ng-init="isCollapsed = true" ng-click="isCollapsed = !isCollapsed"> 
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
        </button> <a class="brand" href="#">Short Course</a>
        <div class="nav-collapse" collapse="isCollapsed">
            <ul class="nav">
                <li><a href="#"><i class="icon-home icon-white"></i> Home</a>
                </li>
                <li><a href="#">Lessons</a>
                </li>
                <li><a href="#">Grades</a>
                </li>
            </ul>
            <ul class="nav pull-right">
                <li><a href="#/class"><i class="icon-upload icon-white"></i> Upload/Save</a>
                </li>
                <li><a href="#/class"><i class="icon-off icon-white"></i> Save/Logout</a>
                </li>
            </ul>
        </div>
        <!-- /.nav-collapse -->
    </div>
</div>
<!-- /navbar-inner -->
</div>
— 除杂
source
6

如果您正在寻找Angular2。然后是需要的更改。

<button type="button" class="navbar-toggle collapsed" (click)="toggleCollapse()"
        aria-expanded="false">

菜单应如下所示。

<div class="navbar-collapse" id="bs-navbar-collapse" [class.collapse]="isCollapsed">
      <ul class="nav navbar-nav">
        <li>
          <a href="">
            Dashboard

您的控制器应该是这样的。

import { Component} from '@angular/core';

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.css']
})
export class NavbarComponent {
  isCollapsed: boolean = true;

  toggleCollapse(): void {
    this.isCollapsed = !this.isCollapsed;
  }

}

看，这在中相对容易angular2。感谢@yankee的回答。

— lokeshjain2008
source
4

这是使用ui.bootstrap.collapse模块的有效实现。https://jsfiddle.net/7z8hLuyu/

的HTML

<div ng-app="app">
<nav class="navbar navbar-default">
  <div class="container-fluid" ng-controller="NavigationCtrl as vm">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" ng-click="vm.toggleCollapse()">
        <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>

    <!-- Collect the nav links, forms, and other content for toggling -->
<div class="navbar-collapse" style="overflow:hidden!important;" uib-collapse="vm.    isCollapsed">
      <ul class="nav navbar-nav">
    <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></    li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>     
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
</div>

控制器（使用controllerAs语法）：

(function(){
    'use strict';

  angular
    .module('app', ['ngAnimate','ui.bootstrap.collapse'])
    .controller('NavigationCtrl', NavigationCtrl);

  NavigationCtrl.$inject = [];

  function NavigationCtrl() {
    var vm = this;
    vm.isCollapsed = true;
    vm.toggleCollapse = toggleCollapse;

    function toggleCollapse() {
        vm.isCollapsed = !vm.isCollapsed;
    }
  }

})();

注意：要使动画在ui.bootstrap模块中起作用，必须包含ngAnimate。

— 瑞安
source
0

我觉得这将是简单的JS修复：

//for close, opened dropdown.
$(".nav a").click(function () {
    if ($(".navbar-collapse").hasClass("in")) {
        $('[data-toggle="collapse"]').click();
    }
});

如果此代码无法正常工作，则说明其绑定正确，因此将其放在加载页面的控制器中。

— 赛德
source
0

只需将jquery.min.js和bootstrap.min.js添加到index.html文件即可解决此问题。

对于可折叠的导航，我们需要包含jquery.min.js和bootstrap.min.js

— 维鲁
source
1
这是错误的。它可能可行，但是这个问题是针对Angular / Bootstrap而不是jQuery / Bootstrap的，所以您有点将OP指向错误的方向。无需为此引入对jQuery的依赖。查看noduck和yankee的答案。
— lostdorje '16
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.