Barre de navigation réactive avec le bootstrap angi-ui (fait de la manière angular correcte)

J’ai créé un JSFiddle avec une barre de navigation déroulante utilisant le module “ui.bootstrap.dropdownToggle” de angular-ui-boost: http://jsfiddle.net/mhu23/2pmz5/

 

Pour autant que je comprenne, il s’agit de la manière appropriée et angular de mettre en œuvre un tel menu déroulant. Le “mauvais” moyen, en termes d’angularjs, serait d’inclure bootstrap.js et d’utiliser “data-toggle =” dropdown “… Suis-je juste ici?

Maintenant, je voudrais append 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 angular correct pour append un comportement réactif à ma barre de navigation existante?

J’ai évidemment besoin d’utiliser des classes de navbar réactives telles que “nav-collapse collapse navbar-responsive-collapse”. Mais je ne sais pas comment …

J’apprécierais vraiment votre aide!

Merci d’avance! Michael

Vous pouvez le faire en utilisant la directive “collapse”: http://jsfiddle.net/iscrow/Es4L3/ (vérifiez les deux “Note” dans le HTML).

        Title   

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


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

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

Changement: collapse à uib-collapse .

Mise à jour 2015-06

Basé sur le commentaire / exemple de antoinepairet :

Utiliser l’ uib-collapse fournit des animations: http://plnkr.co/edit/omyoOxYnCdWJP8ANmTc6?p=preview

  

Ancien..

Je vois que la question est formulée autour de BS2, mais j’ai pensé proposer une solution pour Bootstrap 3 en utilisant la solution ng-class basée sur des suggestions dans le numéro 394 de ui.bootstrap :

La seule variante de l’ exemple de bootstrap officiel est l’ajout de ng- atsortingbutes noté par commentaires, ci-dessous:

  

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 la seconde liste déroulante est coupée… bonne chance!

Je ne suis pas sûr que quiconque ait le même problème de réactivité, mais il ne s’agissait que d’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; } } 

Ma solotion pour la barre de navigation réactive / déroulante avec le bootstrap angi-ui (lors de la mise à jour vers angular 1.5 et ui-bootrap 1.2.1)
index.html

  ...     

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 }