Wie man Pfad/Route in AngularJS zur Anzeige der aktuellen Ansicht im Menü

Question

Erstelle ich eine kleine AngularJS App, die Bootstrap verwendet. Ich benutze die Boostraps Nav-Komponente und möchte den Menüpunkt der aktuellen Seite hervorheben.

Ich muss in der Lage sein, den Pfad/die Route zu bestimmen, die der aktuellen Ansicht zugeordnet sind, damit ich die CSS-Klasse für meine Boostrap Nav-Links festlegen kann.

<ul class="nav navbar-nav"> 
    <li data-ng-class="{'active': true}"> 
     <a href="#">Home <span class="sr-only" data-ng-show="false">(current)</span></a> 
    </li> 
    <li data-ng-class="{'active': false}"> 
     <a href="#/about">About Us <span class="sr-only" data-ng-show="false">(current)</span></a> 
    </li> 
    <li data-ng-class="{'active': false}"> 
     <a href="#/services">Services <span class="sr-only" data-ng-show="false">(current)</span></a> 
    </li> 
    <li data-ng-class="{'active': false}"> 
     <a href="#/testimonials">Testimonials <span class="sr-only" data-ng-show="false">(current)</span></a> 
    </li> 
    <li data-ng-class="{'active': false}"> 
     <a href="#/contact">Contact <span class="sr-only" data-ng-show="false">(current)</span></a> 
    </li> 
</ul> 

Ich möchte die „wahr/falsch“ Werte in der Daten-ng-Klasse der LI-Elemente ersetzen, ein Ausdruck zu sein, der den Wert true, wenn LI die aktuell angezeigte Ansicht übereinstimmt, und auch Daten-ng -show wird unter denselben Umständen als wahr ausgewertet.

Ist das der beste Weg, dies zu erreichen?

Answer 1

Ich glaube nicht, dass es andere Wege gibt, das zu erreichen. Folgendes ist der vorläufige Code.

eine Funktion isActive() in Ihrem Controller sagen Fügen Sie wie folgt vor,

$scope.isActive = function (route) { 
    return route === $location.path(); 
}; 

In Ihrem HTML, die true/false Wert mit der Funktion in ng-class wie folgt ersetzen,

<ul class="nav navbar-nav"> 
    <!-- use the `isActive()` function here in `ng-class` --> 
    <li data-ng-class="{'active': isActive('/')}"> 
     <a href="#">Home <span class="sr-only" data-ng-show="false">(current)</span></a> 
    </li> 
    <li data-ng-class="{'active': isActive('/about')}"> 
     <a href="#/about">About Us <span class="sr-only" data-ng-show="false">(current)</span></a> 
    </li> 

    ... 
</ul> 

einmal überprüfen Sie bitte, was ist $location.path() wird im Controller zurückgegeben und ändert den Argumentwert für isActive() Funktion im HTML-Code. Es ändert sich abhängig davon, ob Sie html5 Modus verwenden oder nicht (einschließlich oder nicht).