Winkel-UI-Router: Wie bekomme ich die Parent-Ansicht, um "aktiv" zu sein, wenn Sie zur verschachtelten Ansicht navigieren?
https://stackoverflow.com//questions/22054391
-
21-12-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Ich arbeite an einem Projekt, das den UI-Router implementiert hat, und verwendet den generationspflichtigen Class, um die aktive Klasse zum Navigationsmenüpunkt hinzuzufügen, wenn dieser Artikel die aktuelle Route ist.Wenn Sie jedoch zu einer verschachtelten Ansicht innerhalb dieser Ansicht navigieren, ist der Parent-Menüpunkt nicht mehr aktiv.Siehe den folgenden PLUNNER:
http://plnkr.co/edit/2coeds?p=Preview
Standardmäßig (oder wenn Sie darauf klicken) Route 1 ist "aktiv".Wenn Sie auf "Liste anzeigen", sehen Sie, dass die Route 1 nicht mehr aktiv ist.
edit:
Der einzige Unterschied zwischen diesem Beispiel und meinem aktuellen Projekt besteht darin, dass das Navigationsmenü in meinem tatsächlichen Projekt einen eigenen Controller hat und daher nicht denselben Bereich wie der Controller für "Route1" verwendet.
Lösung
Bearbeiten für aktualisierte UI-Router 0.2.13:
ui-sref-active="active" Setzt nun die 'Active'-Klasse, wenn der aktuelle Status der Status des UI-SREF-Zustands oder jedes Kind ist
ui-sref-active-eq="active" verhält sich als die vorherigen Iterationen von ui-sref-aktiv und setzt die Klasse nur für den genauen Zustand
siehe Öffnen von UI-Router-Problemen: https://github.com/angular-ui/ui-router/issues/704 und 818
Eine allgemeine Problemumgehung, die Menschen vorschlagen, ist:
generasacodicetagpre.Natürlich müssen $ staat in $ scope hinzugefügt werden.Siehe aktualisierte PLUNK: http://plnkr.co/edit/khldjp?p=Preview
Andere Tipps
Sie haben ein falsches Verständnis von UI-SREF-Active="Active"
generasacodicetagpre.Dies zeigt spezielle CSS-Hervorhebung nur, wenn Sie sich in staatlicher Route1 befinden (Referenz https://github.com/angular-ui/ui-router/wiki/quick-reference#wiki-ui-sref-Active ). Dies ist der Fall, wenn Sie auf Route 1. klicken, aber wenn Sie auf "Liste anzeigen" klicken, sind Sie nicht mehr in Route1. Vielmehr sind Sie in Staat "Route1.list". Sie können dies überprüfen, indem Sie den folgenden Code schreiben. Dies ist streng, um zu verstehen, wie der Zustand funktioniert.
js
Innenregler
generasacodicetagpre.in innen html
generasacodicetagpre.Wenn Sie sich genau auf die Dokumentation von UI-SREF-Active ansehen, betrachtet es nicht nur den Statamen, sondern auch Stateparams, daher, wenn Sie er ersetzen, nicht mehr CSS ändert. Aus der Sourcecode wird es klarer.
generasacodicetagpre.Um das Problem zu lösen, erinnern Sie sich an Scope-Variablen in verschachtelten Ansichten.
Innenregler der Route.
generasacodicetagpre.in html
generasacodicetagpre.Winkel-UI-Router unterstützt das nun nativ.Siehe Commit https://github.com/angular-ui/ui-router/commit/ bf163ad6ce176ce28792696c8302d7cdf5c05a01
Meine Lösung sollte eingestellt werden:
generasacodicetagpre.Der Status wurde bereits zuvor zum Umfang des Controllers hinzugefügt:
generasacodicetagpre.Sie müssen nichts in den Controller tun.Hier ist mein Beispielcode:
generasacodicetagpre.In Route-Konfiguration:
generasacodicetagpre.Jetzt haben sie aktualisiert und der neue Weg, dies zu tun, ist
generasacodicetagpre.unten ist die Statusdatei
generasacodicetagpre.Wir haben bereits eine Lösung ohne "Hack" hier
das ist der Weg zu tun:
html>
generasacodicetagpre.
Unsere Router-Konfiguration ist derartige>
generasacodicetagpre.Ich bin hier hierher gekommenEs funktionierte auch für verschachtelte Zustände.
generasacodicetagpre. Wenn die App zum angular-ui-router-Status navigiert, erscheint das resultierende HTML:
ui-sref-aktive Schnellverweis:
Eine Richtlinie, die zusammen mit UI-SREF arbeitet, um ein Element Klassen hinzuzufügen Wenn der staatliche Stand der UI-SREF-Richtlinie aktiv ist, und entfernen sie, wenn es inaktiv ist.Das primäre Gebrauchsfall ist es, das zu vereinfachen Spezielles Erscheinungsbild der Navigationsmenüs, die auf UI-SREF angewiesen sind, indem Der Menütieren des Status "Active" wird anders angezeigt, und unterscheidet es aus den inaktiven Menüpunkten.
Ich hoffe, das ist es, wonach Sie gesucht haben
Schritt 1: Fügen Sie einen Controller für Ihre Navigierleiste hin und befindet sich in Ihrer vorhandenen Steuerung generasacodicetagpre.
STEP2: In Ihrer Navigleiste
generasacodicetagpre.das ist es.
