web-dev-qa-db-de.com

Angular UI, Bootstrap Navbar Collapse und Javascript

Ich habe in vielerlei Hinsicht Probleme mit dem UI-Router. Ich verstehe nicht, wie es mit anderen Frameworks interagiert.

Ich versuche nämlich, Bootstrap 3s navbar collapse-Modul zu implementieren, siehe unten:

<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>
      <a class="navbar-brand" href="#">Project name test</a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</div>

Dies ist direkt von der Bootstrap Website und es funktioniert einwandfrei, wenn es sich in einer eigenen HTML-Seite befindet.

Das Problem ist, wenn ich es in eine UI-Router-Ansicht einfüge. Die Einklappaktion funktioniert nicht mehr - ich vermute, weil die "Datenziel" -Funktion ihr Ziel irgendwie nicht finden kann.

Wie benutzt man Bootstrap 3 mit Angular UI? Die Angular UI Bootstrap= Das Paket enthält kein Navbar-Modul.

Die Antwort unten ist gut. Hier ist eine Referenz-URL Twitter Bootstrap Navbar mit AngularJS - Collapse Not Functioning .

angularjstwitter-bootstrapangular-uiangular-ui-router
32
Learning stats by example

Sie sollten bootstrap native js-Eigenschaften durch ui-bootstrap-Direktiven ersetzen (beachten Sie das ng-click und collapse):

<nav class="navbar navbar-default" role="navigation">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" ng-click="navbarCollapsed = !navbarCollapsed">
        <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="#">
        <!-- your branding here -->
      </a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" collapse="navbarCollapsed">
      <!-- your normal collapsable content here -->
    </div>
</nav>

Stellen Sie den Anfangswert in Ihrem Controller ein:

$scope.navbarCollapsed = true;

Bearbeiten:

Neue Versionen von ui-bootstrap Präfix für alle Komponenten . Passen Sie Ihren Code entsprechend an, z. collapse -> uib-collapse.

68
user2847643

Mein spezielles Problem drehte sich um den Umfang. Ich benutze ng-repeat um meine Menüpunkte durchzugehen, so dass navbarCollapsed in der ng-repeat untergeordneter Bereich.

Die Lösung bestand darin, auf die Variablen des übergeordneten Bereichs zuzugreifen. Einfach wie:

ng-click="$parent.navbarCollapsed = !$parent.navbarCollapsed"

Hoffe, das hilft jedem, der das gleiche Problem hat.

2
user2058054