twitter-bootstrap - how - navbar bootstrap 4 angular 6
Twitter Bootstrap Navbar con AngularJS: colapsar no funciona (8)
Estoy usando la barra de navegación Bootstrap de Angular y de Twitter y estoy intentando que la funcionalidad de colapsar funcione.
Parcial: program.html
<div class="navbar navbar-inverse navbar-static-top" ng-include="''partials/navbar.html''" ng-controller="NavbarCtrl"></div>
Parcial: 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 barra de navegación se muestra perfectamente. Los menús desplegables funcionan muy bien. Las funciones angulares cargan los datos y marcan los elementos específicos como activos y completan los modelos a la perfección. Lo único que no funciona es la función de colapso receptivo. Cuando cambio el tamaño de la pantalla, los elementos del menú desaparecen y aparece el ícono del menú, pero al hacer clic no funciona. Estoy atascado en esto y sé que tiene que ser una solución simple, pero no puedo resolverlo. ¡Cualquier ayuda sería apreciada!
Aquí hay una implementación que funciona usando el módulo 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>
Controlador (usando la sintaxis de 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;
}
}
})();
Nota: para que la animación funcione en los módulos ui.bootstrap, debe incluir ngAnimate.
El solo hecho de agregar jquery.min.js y bootstrap.min.js al archivo index.html resolvió este problema.
Para la navegación colapsable, debemos incluir jquery.min.js y bootstrap.min.js
Esto fue complicado. Los documentos mostraban una dirección, y funciona de maravilla. Copié el ejemplo de documentos ( http://twitter.github.com/bootstrap/components.html#navbar ) y traté de usarlo. Luego fui a la página de ejemplos y probé el diseño que figura aquí: http://twitter.github.com/bootstrap/examples/fluid.html
La única diferencia fue un <button> lugar de <a>
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
En lugar de
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
No sé por qué, pero cambiar eso lo hizo funcionar muy bien.
EDITAR
Arbiter señaló que al <a /> le faltaba el atributo href=''#'' . Agregar ese atributo también resolvería el problema.
No es necesario activar un controlador. Simplemente utilice ng-init lugar para inicializar el indicador isCollapsed cuando la plantilla se compila inicialmente.
<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>
Para los interesados: he aquí otra forma de implementar esto sin javascript de Bootstrap.
Importar UI-Bootstrap de Angular.
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;
}
Y el violín - http://jsfiddle.net/KY5Mf/
Quería hacerlo funcionar con AngularJS puro y sin más biblioteca de JavaScript, y resultó ser bastante simple. Solo se necesitan dos cambios comenzando con el ejemplo aquí (bootstrap v3):
En lugar de
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
Solía:
<button type="button" class="navbar-toggle" ng-init="isCollapsed = true" ng-click="isCollapsed = !isCollapsed">
y en lugar de
<div class="collapse navbar-collapse">
Solía:
<div class="navbar-collapse" ng-class="{collapse: isCollapsed}">
Listas deplegables
Además, si tiene menús desplegables en su barra de navegación, lo mismo se aplica a ellos, excepto que la clase css no es ''colapsar'', sino ''abrir'':
<li class="dropdown" ng-class="{ open : dd1 }" ng-init="dd1 = false" ng-click="dd1 = !dd1">
Tenga en cuenta que múltiples listas desplegables necesitarán su propia variable de estado en el ámbito de raíz angular (si no está usando un controlador). Por lo tanto, denominé el primer menú desplegable ''dd1'' aquí, deben ser únicos, de lo contrario, se abrirán / cerrarán varios menús al mismo tiempo. (que es bastante divertido, pero raramente utilizable).
Si buscas Angular2 . Luego soplar es los cambios requeridos.
<button type="button" class="navbar-toggle collapsed" (click)="toggleCollapse()"
aria-expanded="false">
y el menú debería verse así.
<div class="navbar-collapse" id="bs-navbar-collapse" [class.collapse]="isCollapsed">
<ul class="nav navbar-nav">
<li>
<a href="">
Dashboard
Su controlador debería ser algo como esto.
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;
}
}
Mira, esto es relativamente fácil en angular2 . gracias a @yankee por la respuesta.
Siento que esto será una solución JS simple:
//for close, opened dropdown.
$(".nav a").click(function () {
if ($(".navbar-collapse").hasClass("in")) {
$(''[data-toggle="collapse"]'').click();
}
});
Si este código no funciona correctamente, compruebe que se está enlazando correctamente, así que colóquelo en el controlador que carga la página.