web-dev-qa-db-fra.com

Angular UI Bootstrap dropdown responsive Navbar ne fonctionne pas correctement dans la nouvelle version)

Je viens de créer un projet AngularJS avec gruntbower et Yeoman. Version mise à jour incluse vers Angular 1.3.13. Je veux utiliser Angular UI amorcer. J'ai ajouté Nav Bar qui est réactif. Mais sur de petits écrans, la liste déroulante ne semble pas fonctionner. Lorsque je clique sur la liste déroulante, le menu entier se cache.

voici mon 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>

J'utilise toutes les dernières versions de JS. Voici mon 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 barre de navigation en plein écran fonctionne bien. Mais lorsque je redimensionne la taille du navigateur, la barre réactive fonctionne. Le menu n'apparaîtra qu'en cliquant sur le bouton à bascule. Mais quand je clique sur le menu déroulant, tout le menu se cache.

J'ai suivi cette StackOverflow Question et j'en ai eu une Plunker Demo pour cela. Cela fonctionne bien là-bas.

Mais j'utilise les dernières versions de tous les fichiers. Donc le mien ne fonctionne pas. Voici mon code ce que j'ai essayé dans Plnker .

Comment résoudre ce problème? Merci.

angularjsangular-ui-bootstrapnav
19
iCode

Votre partie déroulante a changé.

Voici 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>
22
Dylan

MISE À JOUR pour AngularJS 1.5+ et angular-ui-ootstrap 2.5 +

J'ai essayé plusieurs options pour un menu déroulant fonctionnel dans AngularJS 1.5+ et UIBootstrap dans la barre de menus - rien ne fonctionnait et était obsolète, alors j'ai pensé partager ma solution ici, également disponible dans ce dépôt repo .

Ce que j'ai fait

  1. Utilisé l'exemple de barre de navigation normale de https://angular-ui.github.io/bootstrap/#!#collapse
  2. Combiné avec la fonctionnalité de liste déroulante des boutons comme présenté dans l'exemple de https://angular-ui.github.io/bootstrap/#!#dropdown

Le code (veuillez vous référer aux points 1 et 2 ci-dessus pour plus d'informations)

<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>
4
Yves Schelpe

Contre la dernière version de ui.bootstrap, 0.12.1, je pense que ce devrait être une solution de combinaison sur Dropdown et Collapse de ui.bootstrap:

  1. pour l'élément de menu déroulant, il utilise "dropdown" dans l'élément externe et "dropdown-toggle" dans l'élément interne pour déclencher l'action déroulante;

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

  2. pour le bouton de réduction de la barre de navigation, en mode réactif, il doit ajouter la directive "Réduire" dans le bouton de bascule de la barre de navigation et la division de la barre de navigation.

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

pour la mise en œuvre, veuillez vous référer à: My Plunker

2
mmical