web-dev-qa-db-fra.com

Barre de navigation déroulante réactive avec angular-ui bootstrap (effectuée de la bonne manière angular)

J'ai créé un JSFiddle avec une barre de navigation déroulante utilisant le module "ui.bootstrap.dropdownToggle" de angular-ui-boostrap: 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>

Autant que je sache, c’est le bon moyen, angular, de mettre en œuvre un tel menu déroulant. La "mauvaise" façon, en termes d’angularjs, serait d’inclure bootstrap.js et d’utiliser "data-toggle =" dropdown "... Suis-je juste ici?

Maintenant, j'aimerais ajouter un comportement réactif à ma barre de navigation comme dans le violon suivant: http://jsfiddle.net/ghtC9/6/

MAIS, il y a quelque chose que je n'aime pas dans la solution ci-dessus. Le gars inclus bootstrap.js!

Alors, quel serait le type correct angular pour ajouter un comportement réactif à ma barre de navigation existante?

J'ai évidemment besoin d'utiliser des classes d'amorçage responsive telles que "nav-collapse collapse navbar-responsive-collapse". Mais je ne sais pas comment ...

J'apprécierais vraiment votre aide!

Merci d'avance! Michael

angularjsangular-uiangular-ui-bootstrap
76
Michael Hunziker

Vous pouvez le faire en utilisant la directive "collapse": http://jsfiddle.net/iscrow/Es4L3/ (cochez les deux "Notes" dans le code 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">

C'est-à-dire que vous devez stocker l'état réduit dans une variable et le modifier également en modifiant (simplement) la valeur de cette variable.

La version 0.14 ajoutait un préfixe uib- aux composants:

https://github.com/angular-ui/bootstrap/wiki/Migration-guide-for-prefixes

Changer: collapse en uib-collapse.

57
xhh

Mise à jour 2015-06

Basé sur commentaire/exemple d'antoinepairet :

L’utilisation de l’attribut uib-collapse fournit des animations: 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>

Ancien..

Je vois que la question est articulée autour de BS2, mais je pensais intégrer une solution pour Bootstrap 3 en utilisant une solution de classe ng basée sur des suggestions dans numéro 394 de ui.bootstrap =:

La seule variante de l'exemple exemple officiel bootstrap est l'ajout des attributs ng- notés par des commentaires, ci-dessous:

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

Voici un exemple de travail mis à jour: http://plnkr.co/edit/OlCCnbGlYWeO7Nxwfj5G?p=preview (hat tip Lars)

Cela semble fonctionner pour moi dans des cas d'utilisation simples, mais vous remarquerez dans l'exemple que le second menu déroulant est coupé… bonne chance!

123
ptim

Je ne sais pas si quelqu'un a le même problème réactif, mais c'était simplement une solution CSS simple pour moi.

même exemple

...  ng-init="isCollapsed = true" ng-click="isCollapsed = !isCollapsed"> ...
...  div collapse="isCollapsed"> ...

avec

@media screen and (min-width: 768px) {
    .collapse{
        display: block !important;
    }
}
8
Dylan

Ma solution pour la barre de navigation réactive/déroulante avec angular-ui bootstrap (lors de la mise à jour vers angular 1.5 et, 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
}
1
nguyên