使用 AngularJS 的 Twitter Bootstrap 导航栏 - 折叠不起作用

Posted

技术标签:

【中文标题】使用 AngularJS 的 Twitter Bootstrap 导航栏 - 折叠不起作用【英文标题】:Twitter Bootstrap Navbar with AngularJS - Collapse Not Functioning 【发布时间】:2013-01-22 09:55:47 【问题描述】:

我正在使用 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 函数加载数据并将特定项目标记为活动并完美地填充模型。唯一不起作用的是响应式折叠功能。当我调整屏幕大小时,菜单项消失并出现菜单图标,但单击它不起作用。我坚持这一点,我知道它必须是一个简单的修复,但我就是想不通。任何帮助将不胜感激!

【问题讨论】:

您是否从引导程序中包含了 Collapse.js,我认为如果仍然无法正常工作,它应该丢失了,您可以分享 jsfiddle 字。它包括在内,我在不同的部分上使用了带有手风琴的插件。 你能分享一下小提琴吗 想通了,在下面回答。 【参考方案1】:

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

【讨论】:

谢谢。完美运行:) 为 Bootstrap 3.x 更新 - jsfiddle.net/z2hLy - 值得注意的是,如果您不需要菜单下拉菜单,您只需导入 ['ui.bootstrap.collapse']。 你是我的救星。谢谢! bs-js-navbar-collapse!缺失的部分!记录在哪里? 仅供参考,您现在需要使用uib-collapse 指令而不是collapse【参考方案2】:

我想让它与 pure 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”,它们必须是唯一的,否则多个下拉菜单将同时打开/关闭。 (这很有趣,但很少使用)。

【讨论】:

这对我有很大帮助,请添加到您的答案中,这也适用于导航栏中的下拉菜单。 [li class="dropdown" ng-class=" open : isDropDownCollapsed" ng-init="isDropDownCollapsed = false" ng-click="isDropDownCollapsed = !isDropDownCollapsed"] @GerbenRampaart:请随时编辑我的答案。 这对我帮助很大。谢谢!如果你必须下拉(dd1 和 dd2)并且你想在打开 dd2 时关闭 dd1,你可以通过 ng-click="dd2 = !dd2; dd1 = false" 这对我也有用。我不需要向控制器添加任何东西。 这很好用,但是当点击链接时我的菜单没有自动折叠。所以我只是将ng-click 处理程序移动到包含按钮和菜单项的父&lt;div&gt;,以便单击汉堡包按钮或单击链接都会折叠菜单。【参考方案3】:

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

唯一的区别是&lt;button&gt; 而不是&lt;a&gt;

<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">

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

编辑

Arbiter 指出 &lt;a /&gt; 缺少 href='#' 属性。添加该属性也可以解决问题。

【讨论】:

我认为这是因为您的链接缺少 href="#" - 所以默认链接行为没有被删除。 现在我正在查看它,这是 100% 正确的。我将编辑答案并将其放入。谢谢!如果只有你在我问这个问题的那一天,我就可以避免严重的头痛。 我只在不再需要我的时候出现。【参考方案4】:

无需使用控制器。在模板最初编译时,只需使用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>

【讨论】:

【参考方案5】:

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

【讨论】:

【参考方案6】:

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

【讨论】:

【参考方案7】:

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

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

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

【讨论】:

【参考方案8】:

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

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

【讨论】:

这是错误的。它可能有效,但这个问题是针对 Angular/Bootstrap 而不是 jQuery/Bootstrap,所以你有点将 OP 转向错误的方向。无需为此引入对 jQuery 的依赖。查看 noduck 和 yankee 的答案。

以上是关于使用 AngularJS 的 Twitter Bootstrap 导航栏 - 折叠不起作用的主要内容,如果未能解决你的问题,请参考以下文章

使用 AngularJS 的 Twitter Bootstrap 导航栏 - 折叠不起作用

结合 AngularJS 和 Twitter Bootstrap 的最佳方式

我如何将 AngularJS ng-repeat 与 Twitter Bootstrap 的脚手架一起使用?

如何在 Twitter Bootstrap AngularJS 模态窗口中以 100% 宽度显示 Flot 图表

如何使 Twitter Bootstrap 按钮组与 AngularJS 一起工作?

AngularJS + OAuth