example - modal bootstrap angularjs
Barra de navegación desplegable receptiva con bootstrap angular-ui(hecho en el tipo angular correcto) (4)
Creé un JSFiddle con una barra de navegación desplegable usando el módulo de angular-ui-boostrap "ui.bootstrap.dropdownToggle": http://jsfiddle.net/mhu23/2pmz5/
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container"> <a class="brand" href="#">
My Responsive NavBar
</a>
<ul class="nav">
<li class="divider-vertical"></li>
<li class="dropdown"> <a href="#" class="dropdown-toggle">
Menu 1 <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#/list">Entry 1</a>
</li>
<li><a href="#/list">Entry 2</a>
</li>
</ul>
</li>
....
</ul>
</div>
</div>
</div>
Por lo que yo entiendo, esta es la forma correcta y angular de implementar dicho menú desplegable. La forma "incorrecta", en términos de angularjs, sería incluir bootstrap.js y usar "data-toggle =" dropdown "... ¿Estoy aquí?
Ahora me gustaría agregar un comportamiento receptivo a mi barra de navegación como se hace en el siguiente Fiddle: http://jsfiddle.net/ghtC9/6/
PERO, hay algo que no me gusta de la solución anterior. ¡El tipo incluido bootstrap.js!
Entonces, ¿cuál sería el tipo de forma angular correcta para agregar un comportamiento receptivo a mi barra de navegación existente?
Obviamente necesito usar clases de barra de navegación receptivas de bootstraps como "colapso de navegación colapso de navegación-respuesta-colapso". Pero no sé cómo ...
¡Realmente apreciaría tu ayuda!
¡Gracias de antemano! Miguel
Actualización 2015-06
Basado en el comentario / ejemplo de antoinepairet :
El uso uib-collapse atributo uib-collapse proporciona animaciones: http://plnkr.co/edit/omyoOxYnCdWJP8ANmTc6?p=preview
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<!-- note the ng-init and ng-click here: -->
<button type="button" class="navbar-toggle" ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed">
<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>
<div class="collapse navbar-collapse" uib-collapse="navCollapsed">
<ul class="nav navbar-nav">
...
</ul>
</div>
</nav>
Antiguo..
Veo que la pregunta está enmarcada alrededor de BS2, pero pensé en lanzar una solución para Bootstrap 3 usando la solución ng-class basada en las sugerencias de ui.bootstrap issue 394 :
La única variación del ejemplo de arranque oficial es la adición de los atributos ng- señalados por los comentarios, a continuación:
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<!-- note the ng-init and ng-click here: -->
<button type="button" class="navbar-toggle" ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed">
<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>
<!-- note the ng-class here -->
<div class="collapse navbar-collapse" ng-class="{''in'':!navCollapsed}">
<ul class="nav navbar-nav">
...
Aquí hay un ejemplo de trabajo actualizado: http://plnkr.co/edit/OlCCnbGlYWeO7Nxwfj5G?p=preview (hat tip Lars)
Esto parece funcionar para mí en casos de uso simple, pero notará en el ejemplo que el segundo menú desplegable está cortado ... ¡buena suerte!
Mi solidación para la barra de navegación sensible / desplegable con bootstrap angular-ui (cuando se actualiza a angular 1.5 y, ui-bootrap 1.2.1)
index.html
...
<link rel="stylesheet" href="/css/app.css">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<input type="checkbox" id="navbar-toggle-cbox">
<div class="navbar-header">
<label for="navbar-toggle-cbox" class="navbar-toggle"
ng-init="navCollapsed = true"
ng-click="navCollapsed = !navCollapsed"
aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</label>
<a class="navbar-brand" href="#">Project name</a>
<div id="navbar" class="collapse navbar-collapse" ng-class="{''in'':!navCollapsed}">
<ul class="nav navbar-nav">
<li class="active"><a href="/view1">Home</a></li>
<li><a href="/view2">About</a></li>
<li><a href="#">Contact</a></li>
<li uib-dropdown>
<a href="#" uib-dropdown-toggle>Dropdown <b class="caret"></b></a>
<ul uib-dropdown-menu role="menu" aria-labelledby="split-button">
<li role="menuitem"><a href="#">Action</a></li>
<li role="menuitem"><a href="#">Another action</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
app.css
/* show the collapse when navbar toggle is checked */
#navbar-toggle-cbox:checked ~ .collapse {
display: block;
}
/* the checkbox used only internally; don''t display it */
#navbar-toggle-cbox {
display:none
}
No estoy seguro si alguien tiene el mismo problema de respuesta, pero fue solo una solución de CSS simple para mí.
mismo ejemplo
... ng-init="isCollapsed = true" ng-click="isCollapsed = !isCollapsed"> ...
... div collapse="isCollapsed"> ...
con
@media screen and (min-width: 768px) {
.collapse{
display: block !important;
}
}
Puedes hacerlo usando la directiva "colapso": http://jsfiddle.net/iscrow/Es4L3/ (marca las dos "Notas" en el HTML).
<!-- Note: set the initial collapsed state and change it when clicking -->
<a ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed" class="btn btn-navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Title</a>
<!-- Note: use "collapse" here. The original "data-" settings are not needed anymore. -->
<div collapse="navCollapsed" class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav">
Es decir, necesita almacenar el estado colapsado en una variable y cambiar el colapso también por (simplemente) cambiando el valor de esa variable.
La versión 0.14 agregó un prefijo uib- a los componentes:
https://github.com/angular-ui/bootstrap/wiki/Migration-guide-for-prefixes
Cambio: collapse a uib-collapse .