angular-ui-router verschachtelte Ansichten und "RangeError: Maximale Call-Stack-Größe überschritten"

8

Ich verwende die neueste Version von IonicFramework , die angular-ui-router 0.2.8 unter der Haube verwendet. Dies ist das erste Mal, dass ich den UI-Router benutze, also mache ich wahrscheinlich einen dummen Fehler, aber ich kann nicht herausfinden, was es ist. Wenn ich zu einem neuen Status / einer Reihe von Ansichten navigiere, die ich gerade hinzugefügt habe, wird die Fehlermeldung "Maximale Größe des Anrufstapels überschritten" angezeigt und der Chrome-Tab stürzt ab.

Mein Basis-HTML ist extrem einfach:

%Vor%

Und hier ist die Routenkonfiguration für die relevanten Bildschirme:

%Vor%

Das einfache Starten der App mit der obigen Routenkonfiguration verursacht den Fehler, es ist keine weitere Interaktion erforderlich.

Hier sind meine Ansichten ...

event.html:

Beachten Sie den Block <nav-view></nav-view> , bei dem ich erwarte, dass die untergeordneten Ansichten gerendert werden.

%Vor%

eventCheckin.html:

%Vor%

chooseEvent.html:

%Vor%

Abgesehen von der unendlichen Rekursion des Aufruf-Stacks erhalte ich keine weiteren Fehler in der Konsole. Irgendeine Idee, was ich falsch mache?

    
Adam Tuttle 23.01.2014, 13:41
quelle

1 Antwort

6

Ihr Beispiel half dabei, einen Fehler in der navView-Anweisung zu lokalisieren. Seitdem habe ich den Fix in den nächtlichen Build gelegt, der in unserer nächsten Version erscheinen wird.

Es ist eine Sache, darauf hinzuweisen, dass der eventmenu -Zustand abstract: true hat, weil das Side-Menü selbst keine eigene View ist, sondern ein Container für Views.

  

Ein abstrakter Zustand kann Kinderzustände haben, aber nicht selbst aktiviert werden. Ein "abstrakter" Zustand ist einfach ein Zustand, in den nicht übergegangen werden kann. Es wird implizit aktiviert, wenn einer seiner Nachkommen aktiviert ist.

Ссылка

Im Folgenden finden Sie ein Beispiel für die Verwendung eines abstrakten Status für ein Seitenmenü.

%Vor%

Für das Markup steht der Hauptteil <nav-view> im Stammverzeichnis des Hauptteils und% <nav-bar> in <pane side-menu-content> . Beachten Sie, dass Ionic <nav-view> anstelle von <ui-view> des Angular UI Routers verwendet, da die navView-Anweisung von Ionic über ein integriertes Navigations- und Animationssystem verfügt.

Als nächstes hat event-menu.html (was ein abstrakter Zustand ist) eine Kind-navView-Direktive namens menuContent , an der alle anderen Zustände ihre Ansichten einfügen.

%Vor%

Ich habe hier einen schnellen CodePen zusammengestellt: Ссылка

Zum Zeitpunkt des Schreibens verwendet der Codepen auch den nächtlichen Build, da einige der Anforderungen für Ihre Demo noch nicht veröffentlicht wurden.

Hoffe das hilft!

    
adam 23.01.2014, 17:53
quelle