angularjs - open - Angular UI Bootstrap La barra desplegable de respuesta de Navbar no funciona correctamente en una nueva versión
ng-bootstrap angular 6 (3)
Acabo de crear un proyecto AngularJS con grunt bower y Yeoman . Incluye versión actualizada a Angular 1.3.13 . Quiero usar bootstrap Angular UI . He añadido la barra de navegación que es sensible. Pero mientras que en pantallas pequeñas, el menú desplegable no parece funcionar. Cuando hago clic en el menú desplegable se oculta todo el menú.
Aquí está mi index.html
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
</head>
<body ng-app="webClientApp">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<header>
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<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="#/">Web Client</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse"
ng-class="!navCollapsed && ''in''" ng-click="navCollapsed=true">
<ul class="nav navbar-nav">
<li class="active"><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li class="dropdown"><a href="" class="dropdown-toggle" data-toggle="dropdown">Dropdown
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="">Action</a></li>
<li><a href="">Another action</a></li>
<li><a href="">Something else here</a></li>
<li><a href="">Separated link</a></li>
<li><a href="">One more separated link</a></li>
</ul></li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="">Link</a></li>
<li class="dropdown"><a href="" class="dropdown-toggle"
data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="">Action</a></li>
<li><a href="">Another action</a></li>
<li><a href="">Something else here</a></li>
<li><a href="">Separated link</a></li>
</ul></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
</header>
<div class="container">
<div ng-view=""></div>
</div>
<div class="footer">
<div class="container">
<p>
<span class="glyphicon glyphicon-heart"></span> from the Yeoman team
</p>
</div>
</div>
<!-- Google Analytics: change UA-XXXXX-X to be your site''s ID -->
<script>
!function(A, n, g, u, l, a, r) {
A.GoogleAnalyticsObject = l, A[l] = A[l] || function() {
(A[l].q = A[l].q || []).push(arguments)
}, A[l].l = +new Date, a = n.createElement(g), r = n
.getElementsByTagName(g)[0], a.src = u, r.parentNode
.insertBefore(a, r)
}(window, document, ''script'',
''//www.google-analytics.com/analytics.js'', ''ga'');
ga(''create'', ''UA-XXXXX-X'');
ga(''send'', ''pageview'');
</script>
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/controllers/about.js"></script>
<!-- endbuild -->
</body>
</html>
Estoy usando todas las últimas versiones de JS. Aquí está mi bower.json
{
"name": "web-client",
"version": "0.0.0",
"dependencies": {
"angular": "^1.3.13",
"bootstrap": "^3.3.2",
"angular-animate": "^1.3.13",
"angular-cookies": "^1.3.13",
"angular-resource": "^1.3.13",
"angular-route": "^1.3.13",
"angular-sanitize": "^1.3.13",
"angular-touch": "^1.3.13",
"angular-bootstrap": "0.12.1"
},
"devDependencies": {
"angular-mocks": "^1.3.13"
},
"appPath": "app",
"moduleName": "webClientApp"
}
La barra de navegación en pantalla completa funciona bien. Pero cuando cambio el tamaño del navegador, la barra de respuesta funciona. El menú aparecerá solo al hacer clic en el botón de alternar. Pero cuando hago clic en el menú desplegable, todo el menú se oculta.
He seguido esta pregunta de StackOverflow y recibí una demostración de Plunker . Está funcionando bien allí.
Pero estoy usando las últimas versiones de todos los archivos. Así que el mío no está funcionando. Aquí está mi código de lo que intenté en Plnker .
¿Cómo resolver este problema? Gracias.
Contra la última versión de ui.bootstrap, 0.12.1, creo que debería ser una solución combinada en Dropdown y Collapse de ui.bootstrap:
para el elemento del menú desplegable, usa "desplegable" en el elemento externo y "desplegable" en el elemento interno para activar la acción desplegable;
<div class="btn-group" dropdown is-open="status.isopen"> <button type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle ng-disabled="disabled"> Button dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div>para el botón de colapso de la barra de navegación, en el modo de respuesta, debe agregar la directiva "Contraer" en el botón de alternancia de la barra de navegación y la división de la barra de navegación
<div ng-controller="CollapseDemoCtrl"> <button class="btn btn-default" ng-click="isCollapsed = !isCollapsed">Toggle collapse</button> <hr> <div collapse="isCollapsed"> <div class="well well-lg">Some content</div> </div> </div>
para la implementación, por favor refiérase a: Mi Plunker
Tu parte desplegable ha cambiado.
Aquí hay un Plunker
<li dropdown>
<a href="#" dropdown-toggle>Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">...</a></li>
....
</ul>
</li>
ACTUALIZADO para AngularJS 1.5+ y angular-ui-ootstrap 2.5+
Probé varias opciones para un menú desplegable de trabajo en AngularJS 1.5+ y UIBootstrap en la barra de menú; nada funcionó y estaba desactualizado, así que pensé que compartiría mi solución aquí, también disponible en este repo commit .
Lo que hice
- Se utilizó el ejemplo de barra de navegación normal de https://angular-ui.github.io/bootstrap/#!#collapse
- Se combinó con la función desplegable de botones como se muestra en el ejemplo en https://angular-ui.github.io/bootstrap/#!#dropdown
El código (por favor refiérase a los puntos 1 y 2 de arriba para mayor orientación)
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" ng-click="isNavCollapsed = !isNavCollapsed">
<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="#">ToDoSth</a>
</div>
<div class="collapse navbar-collapse" uib-collapse="isNavCollapsed">
<ul class="nav navbar-nav">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li uib-dropdown on-toggle="toggled(open)">
<a href id="simple-dropdown" uib-dropdown-toggle>Link 3 <span class="caret"></span></a>
<ul class="dropdown-menu" uib-dropdown-menu aria-labelledby="simple-dropdown">
<li><a href="#">SubItem 1</a></li>
<li><a href="#">SubItem 2</a></li>
<li><a href="#">SubItem 3</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">SubItem 4</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li uib-dropdown on-toggle="toggled(open)">
<a href id="simple-dropdown" class="nav-text" uib-dropdown-toggle>Signed in as John Doe <span class="caret"></span></a>
<ul class="dropdown-menu" uib-dropdown-menu aria-labelledby="simple-dropdown">
<li><a href="#">Profile</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Sign Out</a></li>
</ul>
</li>
</ul>
</div>
</nav>