Twitter Bootstrap Navbar con AngularJS: colapsar no funciona

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

 

Parcial: navbar.html

  

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!

Para los interesados: he aquí otra forma de implementar esto sin javascript de Bootstrap.

Importar UI-Bootstrap de Angular.

HTML:

  

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

  

Solía:

  

y en lugar de

  

Solía:

  

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

  

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).

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 lugar de

  

En lugar de

  

No sé por qué, pero cambiar eso lo hizo funcionar muy bien.

EDITAR

Arbiter señaló que al 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 comstack inicialmente.

  

Si buscas Angular2 . Luego soplar es los cambios requeridos.

  

y el menú debería verse así.

  

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.

Aquí hay una implementación que funciona usando el módulo ui.bootstrap.collapse. https://jsfiddle.net/7z8hLuyu/

HTML

  

Controlador (usando la syntax 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.

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.

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