Le bouton à bascule n'est pas de travailler avec AngularJS et Angulaire de l'interface utilisateur Bootsrap

Du bouton apparaît, mais il ne fonctionne pas. J'ai même code est maintenant en ligne et il n'est pas un travail, mais dans Plunker il travaille.

Plunker - bouton à bascule est de travail

Même code en ligne - bouton ne fonctionne pas

Et le code est:

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

                <div class="nalogo-wrapper">
                    <img class="img-responsive" src="http://placehold.it/50x50&text=Logo" />
                </div>
            </div>
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li><a href="#/view1"><span class="glyphicon glyphicon-home"></span> Etusivu</a></li>
                    <li><a href="#/view2">Palvelut</a></li>
                    <li><a href="#/view3">Yhteistiedot</a></li>
                </ul>
            </div><!--/.nav-collapse -->
        </div>
    </div>
    <div id="main">
        <div ng-view>
        </div>
    </div>

Merci pour l'aide!
Sami

OriginalL'auteur Sami | 2014-02-04

  1. 8

    Je viens de copier ce de travail sur un projet où j'ai utilisé angular-ui bootstrap:

    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle btn navbar-btn" 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="/#">Bake-Off</a>
        </div>
        <div collapse="navCollapsed" class="navbar-collapse collapse navbar-responsive-collapse">
            <ul class="nav navbar-nav">
                <li><a href="#" >Link 1</a></li>
                <li><a href="#" >Link 2</a></li>
                <li></li>
            </ul>
            <div class="container navbar-form navbar-right">

            </div>
        </div>
        <!--/.navbar-collapse -->
    </div>
</div>
    Cela fonctionne!Merci!!!!
    Lorsque j'utilise navbar-fixed-top angulaire d'un bootstrap de l'interface utilisateur, le contenu qui est en dessous de la barre de navigation commence en haut de l'écran et pas en dessous de la barre de navigation. Tout commentaire à ce sujet?

    OriginalL'auteur Josh C.

  2. 1

    Vous devez faire quelques changements dans votre barre de navigation pour accueillir l'effondrement de la directive de l'Angulaire de l'INTERFACE utilisateur-Bootstrap. Je me demandais moi-même pas si longtemps, la question a déjà été posées et répondues ici:

    Sensible déroulant barre de navigation avec angular-ui bootstrap (qui se fait dans la bonne angulaire sorte de moyen)

    OriginalL'auteur iH8

  3. 0

    L'ajout d'une solution alternative à la réponse de Josh C, en changeant simplement l'effondrement de l'udb-effondrement, basée sur la documentation la plus récente

    https://angular-ui.github.io/bootstrap/#!#l'effondrement

    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle btn navbar-btn" 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="/#">Bake-Off</a>
        </div>
        <div uib-collapse="navCollapsed" class="navbar-collapse collapse navbar-responsive-collapse">
            <ul class="nav navbar-nav">
                <li><a href="#" >Link 1</a></li>
                <li><a href="#" >Link 2</a></li>
                <li></li>
            </ul>
            <div class="container navbar-form navbar-right">

            </div>
        </div>
        <!--/.navbar-collapse -->
    </div>
</div>

    OriginalL'auteur Hetdev