Reaktionsschnelle Dropdown-Navigationsleiste mit Angular-UI-Bootstrap (auf die richtige Art und Weise)

Ich habe eine JSFiddle mit einer Dropdown-Navigationsleiste mit dem Modul "ui.bootstrap.dropdownToggle" von angle-ui-boostrap erstellt: 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>

Soweit ich weiß, ist dies die richtige, eckige Art, ein solches Dropdown-Menü zu implementieren. Der "falsche" Weg in Bezug auf Angularjs wäre, bootstrap.js einzuschließen und "data-toggle =" dropdown "zu verwenden ... Bin ich hier richtig?

Jetzt möchte ich meiner Navigationsleiste ein reaktionsfähiges Verhalten hinzufügen, wie in der folgenden Geige beschrieben: http://jsfiddle.net/ghtC9/6/

ABER es gibt etwas, das ich an der obigen Lösung nicht mag. Der Typ hat bootstrap.js eingeschlossen!

Was wäre also die richtige Art und Weise, um meiner vorhandenen Navigationsleiste ein reaktionsfähiges Verhalten hinzuzufügen?

Ich muss natürlich Bootstraps-responsive Navbar-Klassen wie "Nav-Collapse Collapse Navbar-Responsive-Collapse" verwenden. Aber ich weiß nicht wie ...

Ich würde mich sehr über Ihre Hilfe freuen!

Danke im Voraus! Michael

Sie können dies mit der Direktive "Zusammenbruch" tun: http://jsfiddle.net/iscrow/Es4L3/ (überprüfen Sie die beiden "Hinweis" im 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">

Das heißt, Sie müssen den reduzierten Status in einer Variablen speichern und den reduzierten Status auch ändern, indem Sie den Wert dieser Variablen (einfach) ändern.

Release 0.14 fügte uib-Komponenten ein Präfix hinzu :

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

Ändern: collapsezu uib-collapse.

Update 2015-06

Basierend auf dem Kommentar / Beispiel von Antoinepairet :

Die Verwendung des uib-collapseAttributs bietet Animationen: 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>

Antike ..

Ich sehe, dass sich die Frage um BS2 dreht, aber ich dachte, ich würde eine Lösung für Bootstrap 3 mit einer ng-class-Lösung finden, die auf Vorschlägen in ui.bootstrap, Ausgabe 394, basiert :

Die einzige Abweichung vom offiziellen Bootstrap-Beispiel ist das Hinzufügen von ng-Attributen, die in den Kommentaren unten angegeben sind:

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

Hier ist ein aktualisiertes Arbeitsbeispiel: http://plnkr.co/edit/OlCCnbGlYWeO7Nxwfj5G?p=preview (Hutspitze Lars)

Dies scheint in einfachen Anwendungsfällen für mich zu funktionieren, aber Sie werden im Beispiel feststellen, dass die zweite Dropdown-Liste abgeschnitten ist ... viel Glück!

Ich bin mir nicht sicher, ob jemand das gleiche Problem hat, aber es war nur eine einfache CSS-Lösung für mich.

gleiches Beispiel

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

mit

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

Meine Lösung für Responsive / Dropdown-Navigationsleiste mit Angular-UI-Bootstrap (beim Update auf Angular 1.5 und 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
}