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

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

Partial: program.html

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

Partial: 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函数加载数据并将特定项标记为活动,并完美填充模型 . 唯一不起作用的是响应式折叠功能 . 当我调整屏幕大小时,菜单项会消失并显示菜单图标,但单击它不起作用 . 我坚持这个,我知道它必须是一个简单的解决方案,但我无法弄明白 . 任何帮助,将不胜感激!

回答(8)

3 years ago

对于那些感兴趣的人 - 这是在没有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/

3 years ago

我想让它与纯AngularJS一起工作,没有更多的JavaScript库,结果很简单 . 从example here(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类不是“崩溃”,而是“打开”:

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

请注意,多个下拉列表都需要在角度根范围内拥有自己的状态变量(如果您没有使用控制器) . 因此我在这里命名了第一个下拉列表'dd1',它们需要是唯一的,否则多个下拉列表将同时打开/关闭 . (这很有趣,但很少使用) .

3 years ago

这是一个棘手的问题 . 文档显示了一种方式,它的功能很好 . 我复制了文档示例(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">

我不知道为什么,但改变它使它功能很好 .

EDIT

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

3 years ago

无需使用控制器 . 只需使用 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>

3 years ago

如果您正在寻找 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的回答 .

3 years ago

这是一个使用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 .

3 years ago

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

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

如果此代码无法正常工作,请查看它是否正确绑定,因此将其放在加载页面的控制器中 .

3 years ago

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

对于可折叠导航,我们需要包含 jquery.min.js and bootstrap.min.js