AngularJS UI-Router ruft den aktuellen Status aus einer Ansicht ab
-
21-12-2019 - |
Frage
Unter Berücksichtigung der folgenden Zustände aus der UI-Router-Dokumentation:
.state('state1', {
url: '/state1',
templateUrl: 'partials/state1.html'
controller: 'State1Ctrl'
})
.state('state1.list', {
url: '/list',
templateUrl: 'partials/state1.list.html',
})
Und der Controller für „partials/state1.html“ für den Zustand „state1“:
.controller('State1Ctrl', function () {
});
Gibt es eine integrierte Funktion, um innerhalb des Controllers oder innerhalb der Vorlage zu bestimmen, welchem Status der Controller/die Vorlage zugeordnet ist?
Zum Beispiel:
.controller('State1Ctrl', function ($state) {
console.log($state.this); // state1
});
Und wenn es keine integrierte Lösung gibt, wie würden Sie $state oder $stateParams „dekorieren“, um diese Informationen zu enthalten?
Die einzige Lösung, die mir eingefallen ist, besteht darin, $state.get() zu verwenden und dann den Status mit dem Controller- oder Vorlagenwert zu finden.Das scheint jedoch unglaublich chaotisch.
Lösung
konnte das dokumentierte dokumentierter nicht an der Überlieferung gefunden, sodass ich in den Quellcode sah.
Es gibt ein Datenfeld namens $ uiview, das an das UI-View-Element angehängt ist, es enthält den Ansichtsnamen und den zugehörigen Zustand.Sie können diesen Zustand so erhalten:
generasacodicetagpre.oder sogar
generasacodicetagpre.Andere Tipps
Sie können auf das aktuelle Status-Configuratin-Objekt so zugreifen:
generasacodicetagpre.Weitere Informationen schauen Sie sich den $ state dokumentation .
Sie können es wie folgt tun,
generasacodicetagpre.Wir sehen Was ist definiert für current
Zustand, mit der $state.current
, Überprüfen Sie dies Beispiel zeigt:
state1
{
"url": "/state1",
"template": "<div>state1 <pre>{{current | json }}</pre><div ui-view=\"\"></div> </div>",
"controller": "State1Ctrl",
"name": "state1"
}
list
{
"url": "/list",
"template": "<div>list <pre>{{current | json }}</pre></div>",
"controller": "State1Ctrl",
"name": "state1.list"
}
Der Controller:
.controller('State1Ctrl', function($scope, $state) {
$scope.current = $state.current
});
prüfe das Hier
VERLÄNGERN:Das obige Beispiel gibt immer den aktuellen Status zurück, d. h.wenn es eine Hierarchie von drei Zuständen gibt und wir auf den letzten Zustand zugreifen ('state1.list.detail'
) direkt:
<a ui-sref="state1.list.detail({detailId:1})">....
Jeder Controller erhält den gleichen Status:$state("state1.list.detail").
Warum?Da dieser Status über genügend Informationen verfügt, werden alle Ansichten (hierarchisch verschachtelt) und ihre Controller benötigt.Wir können das alles in der beobachten
$state.$current // not .current
Schnell besprochen Hier zitieren:
Darüber hinaus können Benutzer benutzerdefinierte Dekoratoren anhängen, die neue Eigenschaften innerhalb der internen Definition des Staates generieren.Derzeit gibt es hierfür keinen klaren Anwendungsfall, der über den Zugriff auf interne Zustände hinausgeht (d. h.
$state.$current
), gehen jedoch davon aus, dass dies mit der Einführung zusätzlicher Metaprogrammierungsfunktionen immer relevanter wird.
ABER:Es gibt KEINE Möglichkeit, aktuelle Informationen zu erhalten Regler instance
, zu welchem $state
es gehört!Sogar irgendwelche Iterationen, einige durchsuchen $state.get('stateName')
wird unzuverlässig sein, weil auf diese Weise einfach keine aufrechterhaltene Beziehung besteht.Ein Controller Class
könnte für viele Ansichten als unterschiedlich verwendet werden Instances
.Und aus meiner Erfahrung kann ich mich auch an keinen Fall erinnern, in dem ich solche Informationen benötigt hätte ...Ich wünschte, es wäre jetzt etwas klarer
Dies ist nützlich, wenn Sie nach aktuellen Statusnamen suchen, $ staat.current.name
Nicht sicher, dass es die gleiche Version ist, aber bei 0.3.1 können Sie dies verwenden, um den aktuellen Zustand zu erhalten:
generasacodicetagpre.und um einen Scheck durchzuführen:
generasacodicetagpre.Dokumentation: https:// ui-Router.github.io/ng1/docs/0.3.1/index.html#/api/ui.router.State . $ state
A Working " aus dem Feld" Controller aus Ihrem Code, der Status zeigt:
generasacodicetagpre.Wenn Sie den aktuellen Status überprüfen möchten,
console.log("state", $state.current)
Wenn Sie den Namen des aktuellen Statusnamens überprüfen möchten,
console.log("statename", $state.current.name)