Twitter Bootstrap Navbar com AngularJS – Collapse Not Funcioning

Eu estou usando navbar angular e Twitter Bootstrap e tentando obter a funcionalidade de colapso para trabalhar.

Parcial: program.html

 

Parcial: navbar.html

  

A barra de navegação é exibida perfeitamente. Os menus suspensos funcionam muito bem. As funções Angulares carregam os dados e marcam os itens específicos como ativos e preenchem os modelos perfeitamente. A única coisa que não funciona é o recurso de recolhimento responsivo. Quando eu redimensiono a canvas, os itens do menu desaparecem e o ícone do menu aparece, mas clicar nele não funciona. Estou preso a isso e sei que tem que ser uma solução simples, mas não consigo entender. Qualquer ajuda seria apreciada!

Para os interessados ​​- Aqui está outra maneira de implementar isso sem o javascript do Bootstrap.

Importar UI-Bootstrap do Angular.

HTML:

  

JS:

 var myApp = angular.module('myApp', ['ui.bootstrap']); function NavBarCtrl($scope) { $scope.isCollapsed = true; } 

E o violino – http://jsfiddle.net/KY5Mf/

Eu queria que ele funcionasse com o AngularJS puro e nenhuma outra biblioteca JavaScript e acabou sendo bastante simples. Há apenas duas mudanças necessárias começando com o exemplo aqui (bootstrap v3):

Ao invés de

  

Eu usei:

  

e em vez de

  

Eu usei:

  

Dropdowns

Além disso, se você tiver menus suspensos na sua barra de navegação, o mesmo se aplica a eles, exceto que a class css não é ‘colapso’, mas ‘aberta’:

  

Observe que vários dropdowns precisarão de sua própria variável de estado no escopo da raiz angular (se você não estiver usando um controlador). Portanto, eu nomeei o primeiro menu suspenso ‘dd1’ aqui, eles precisam ser únicos, caso contrário, várias listas suspensas serão abertas / fechadas ao mesmo tempo. (o que é muito engraçado, mas raramente utilizável).

Este foi um complicado. Os documentos mostraram um caminho e funciona muito bem. Eu copiei o exemplo docs ( http://twitter.github.com/bootstrap/components.html#navbar ) e tentei usá-lo. Fui até a página de exemplos e tentei o layout listado aqui: http://twitter.github.com/bootstrap/examples/fluid.html

A única diferença foi um vez de

  

Ao invés de

  

Eu não sei porque, mas mudar isso funcionou muito bem.

EDITAR

Árbitro apontou que o estava faltando o href='#' . Adicionar esse atributo também resolveria o problema.

Não há necessidade de envolver um controlador. Apenas use ng-init para inicializar o sinalizador isCollapsed quando o modelo é inicialmente compilado.

  

Se você está procurando por Angular2 . Então sopro é as mudanças necessárias.

  

e menu deve ficar assim.

  

Seu controlador deve ser algo assim.

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

Veja, isso é relativamente fácil em angular2 . obrigado a @yankee pela resposta.

Aqui está uma implementação de trabalho usando o módulo ui.bootstrap.collapse. https://jsfiddle.net/7z8hLuyu/

HTML

  

Controlador (usando a syntax 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 a animação funcione nos módulos ui.bootstrap, você deve include o ngAnimate.

Eu sinto que isso será simples correção JS:

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

Se esse código não estiver funcionando corretamente, verifique se ele está sendo vinculado corretamente. Coloque-o no controlador que carrega a página.

Apenas adicionar jquery.min.js e bootstrap.min.js ao arquivo index.html resolveu esse problema.

Para navegação recolhível , precisamos include jquery.min.js e bootstrap.min.js