web-dev-qa-db-fra.com

Twitter Bootstrap Navbar avec AngularJS - Collapse ne fonctionne pas

J'utilise la barre de navigation Angular et Twitter Bootstrap et j'essaie de faire fonctionner la fonctionnalité de réduction.

Partielle: programme.html 

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

Partielle: 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 -->

La barre de navigation affiche parfaitement. Les menus déroulants fonctionnent très bien. Les fonctions angulaires chargent les données et marquent les éléments spécifiques comme actifs et peuplent parfaitement les modèles. La seule chose qui ne fonctionne pas est la fonction de réduction sensible. Lorsque je redimensionne l'écran, les éléments de menu disparaissent et l'icône du menu apparaît, mais le fait de cliquer dessus ne fonctionne pas. Je suis coincé là-dessus et je sais que ce doit être une solution simple, mais je ne peux tout simplement pas le comprendre. Toute aide serait appréciée!

twitter-bootstrapangularjs
71
Tim Withers

C'était un problème. Les docs ont montré un sens, et cela fonctionne très bien. J'ai copié l'exemple de documentation ( http://Twitter.github.com/bootstrap/components.html#navbar ) et j'ai essayé de l'utiliser. Je suis ensuite allé à la page d'exemples et j'ai essayé la disposition ci-dessous: http://Twitter.github.com/bootstrap/examples/fluid.html

La seule et unique différence était un <button> au lieu de <a>

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

Au lieu de 

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

Je ne sais pas pourquoi, mais cela a bien fonctionné.

EDIT

L'arbitre a souligné qu'il manquait l'attribut <a /> dans le href='#'. L'ajout de cet attribut résoudrait également le problème. 

7
Tim Withers

Pour les personnes intéressées - Voici une autre façon de mettre en œuvre ceci sans le javascript de Bootstrap.

Importer 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;
}

Et le violon - http://jsfiddle.net/KY5Mf/

103
Sean McClory

Je voulais le faire fonctionner avec pure AngularJS et aucune autre bibliothèque JavaScript, et il s’est avéré être assez simple. Il ne faut que deux modifications à commencer par l'exemple ici (bootstrap v3):

Au lieu de

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

J'ai utilisé:

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

et au lieu de

<div class="collapse navbar-collapse">

J'ai utilisé:

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

Dropdowns

De même, si vous avez des menus déroulants dans votre barre de navigation, il en va de même pour eux, sauf que la classe css n'est pas 'collapse', mais 'open':

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

Notez que plusieurs listes déroulantes auront toutes besoin de leur propre variable d'état sur l'étendue angulaire de la racine (si vous n'utilisez pas de contrôleur). C'est pourquoi j'ai nommé le premier menu déroulant 'dd1' ici, ils doivent être uniques, sinon plusieurs menus déroulants s'ouvriront/se fermeront en même temps. (ce qui est assez drôle, mais rarement utilisable).

82
yankee

Pas besoin d'engager un contrôleur. Utilisez simplement ng-init à la place pour initialiser l’indicateur isCollapsed lorsque le modèle est initialement compilé.

<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>
6
demisx

Si vous recherchez Angular2. Alors coup est les changements nécessaires.

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

et le menu devrait ressembler à ceci.

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

Votre contrôleur devrait être quelque chose comme ça.

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;
  }

}

Voir, c'est relativement facile dans angular2. merci à @yankee pour la réponse.

6
lokeshjain2008

Voici une implémentation fonctionnelle utilisant le module 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>

Contrôleur (utilisant la syntaxe 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;
    }
  }

})();

Remarque: pour que l'animation fonctionne dans les modules ui.bootstrap, vous devez inclure ngAnimate.

4
Ryan

Le simple fait d’ajouter jquery.min.js et bootstrap.min.js au fichier index.html a résolu ce problème.

Pour une navigation compressible, nous devons inclure jquery.min.js et bootstrap.min.js

0
Velu

Je pense que ce sera une solution JS simple:

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

Si ce code ne fonctionne pas correctement, vérifiez qu'il est lié correctement. Placez-le donc dans le contrôleur qui charge la page.

0
Syed