Barre de navigation déroulante réactive avec angular-ui bootstrap (réalisée dans les règles de l'art avec angular)

Question

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

D'après ce que j'ai compris, il s'agit de la manière adéquate, du type angulaire, 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"... Ai-je raison ?

J'aimerais maintenant ajouter un comportement réactif à ma barre de navigation, comme le montre le test suivant : http://jsfiddle.net/ghtC9/6/

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

Quelle serait donc la bonne méthode angulaire pour ajouter un comportement réactif à ma barre de navigation existante ?

J'ai évidemment besoin d'utiliser des classes de barres navales réactives bootstraps telles que "nav-collapse collapse navbar-responsive-collapse". Mais je ne sais pas comment...

J'apprécierais vraiment votre aide !

Merci d'avance ! Michael

Answer 1

Je vois que la question porte sur BS2, mais j'ai pensé que je pourrais apporter une solution pour Bootstrap 3 en utilisant la solution ng-class basée sur des suggestions dans problème de ui.bootstrap 394 :

La seule variation par rapport au exemple officiel de bootstrap est l'addition de ng- attributs 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 fonctionnel mis à jour : http://plnkr.co/edit/OlCCnbGlYWeO7Nxwfj5G?p=preview (conseil de chapeau Lars)

Cela semble fonctionner pour moi dans des cas d'utilisation simples, mais vous remarquerez dans l'exemple que la deuxième liste déroulante est coupée bonne chance !

Answer 2

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

En d'autres termes, vous devez stocker l'état effondré dans une variable, et changer l'état effondré également en changeant (simplement) la valeur de cette variable.

Answer 3

Je ne sais pas si quelqu'un a le même problème de réactivité, mais c'était juste une simple solution css 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;
    }
}