Ich verwende angular-ui-router
und verschachtelte Zustände in meiner Anwendung und habe auch eine Navigationsleiste. Die Navigationsleiste ist handgeschrieben und dient ui-sref-active
zum Hervorheben des aktuellen Status. Es ist eine zweistufige Navigationsleiste.
Wenn ich jetzt drin Products / Categories
bin, möchte ich, dass sowohl Products
(in Level 1) als auch Categories
(in Level 2) hervorgehoben werden. Allerdings verwenden ui-sref-active
, wenn ich im Zustand bin Products.Categories
dann nur dieser Zustand markiert ist , nicht Products
.
Gibt es eine Möglichkeit, Products
in diesem Zustand hervorzuheben?
quelle
$state
speziell im Umfang verfügbar gemacht$rootScope.$state = $state
?$rootScope
aber dies ist eine Ausnahme.$scope.includes = $state.includes
) meines Controllers abgebildet, anstatt das gesamte anzuhängen$state
.Hier ist eine Option, wenn Sie mehrere Status verschachteln, die nicht hierarchisch miteinander verbunden sind und für die Ansicht kein Controller verfügbar ist. Sie können den UI-Router-Filter inklusive ByState verwenden, um Ihren aktuellen Status mit einer beliebigen Anzahl benannter Status zu vergleichen.
TL; DR: Mehrere, nicht verwandte, benannte Zustände müssen eine aktive Klasse auf denselben Link anwenden, und Sie haben keinen Controller? Verwenden Sie includeByState .
quelle
State
. Auch wenn Sie ein übergeordnetes Menüelement in der Menüverknüpfung erstellen und keine weitere erstellen möchten,State
nur um dieui-sref-active
Funktion zu verwenden. Ich glaube, sieState
sind für das Layout von HTML gedacht, nicht für die Verwendung in Menü-Links.Das ist die Lösung:
Bearbeiten:
Das Obige funktioniert nur für den genauen Routenpfad und wendet den activeStyle nicht auf die verschachtelten Routen an. Diese Lösung sollte dafür funktionieren:
quelle
data-ng-class="{ active: $state.includes('root.parent')
zu jedem der Links hinzuzufügen ? Woactive
ist der Klassenname?Nehmen wir an, der URL-Baum lautet wie folgt:
app (for home page) -> app.products -> app.products.category
die Verwendung:
Wenn Sie nun auf
products
: drücken, sind nur die Produkte aktiv.Wenn Sie auf drücken, sind
category
sowohl Produkte als auch Kategorien aktiv.Wenn Sie möchten, dass nur die Kategorie aktiv ist, wenn Sie darauf drücken, sollten
ui-sref-active-eq
Sie Folgendes verwenden: für die Produkte, was bedeutet, dass nur die Kategorie aktiv ist und nicht die Kinder.die richtige Verwendung in app.js:
quelle
ui-sref-active-eq
funktioniert perfekt!So einfach, Schritt 1: Fügen Sie einen Controller für Ihre Navigationsleiste hinzu oder fügen Sie in Ihrem vorhandenen Controller, in dem die Navigationsleiste enthalten ist, Folgendes hinzu
Schritt 2: In Ihrer Navigationsleiste
Das ist es.
quelle
UI-Router . Code-Snippet, um Ihre Navigationsleiste zu aktivieren.
HTML
CSS
Innerhalb von courseView.HTML
Diese Schaltfläche befindet sich in der Kursansicht, mit der Sie zur nächsten Ansicht, dh zum Blog, navigieren. und macht Ihre Navigationsleiste hervorgehoben.
Finden Sie ein ähnliches Beispiel, eine eckige Demo-UI-Router-App: https://github.com/vineetsagar7/Angualr-UI-Router
quelle
Mein Code navigierte von / productGroups zu / productPartitions. Dies ist die einzige Möglichkeit, auf die Ansicht "productPartitions" zuzugreifen.
Also habe ich einen versteckten Anker hinzugefügt, bei dem ui-sref ebenfalls auf "productPartitions" innerhalb desselben Listenelements gesetzt ist, das ui-sref-active hat
Jetzt bleibt die Navigationsschaltfläche productGroups aktiv, wenn Sie auf eine der beiden Ansichten zugreifen
quelle
Hier was ich getan habe um das gleiche zu erreichen. Der übergeordnete Status ist "app.message" und wird nicht als abstrakt deklariert.
Untergeordnete Zustände sind "app.message.draft", "app.message.all", "app.message.sent".
Mein Navigationslink -
Definieren Sie die Routen / Links Ihrer Kinder.
und Update in config-
quelle