Dies ist das erste Mal, dass ich versuche, UI-Router zu verwenden.
Hier ist meine app.js.
angular.module('myApp', ['ionic'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise("/index.html");
$stateProvider.state('index', {
url: '/'
template: "index.html",
controller: 'loginCtrl'
});
$stateProvider.state('register', {
url: "/register"
template: "register.html",
controller: 'registerCtrl'
});
})
Wie Sie sehen können, habe ich zwei Zustände. Ich versuche, den Status wie folgt zu registrieren:
<a ui-sref="register">
<button class="button button-balanced">
Create an account
</button>
</a>
Aber ich bekomme
'Register' konnte nicht aus dem Status '' aufgelöst werden.
Ausnahme. Was ist das Problem hier?
Antworten:
Diese Art von Fehler bedeutet normalerweise, dass einige Teile des (JS) -Codes nicht geladen wurden. Dass der Zustand, in dem er sich
ui-sref
befindet, fehlt.Es gibt ein funktionierendes Beispiel
Ich bin kein Experte für Ionen, daher sollte dieses Beispiel zeigen, dass es funktionieren würde, aber ich habe einige weitere Tricks verwendet (Eltern für Tabs).
Dies ist ein etwas angepasster Zustand def:
Und hier haben wir die übergeordnete Ansicht mit Registerkarten und deren Inhalt:
Nehmen Sie es mehr als ein Beispiel dafür, wie Sie es zum Laufen bringen und später das ionische Framework richtig verwenden können ... Überprüfen Sie dieses Beispiel hier
Hier finden Sie ähnliche Fragen und Antworten mit einem Beispiel, bei dem das Problem des ionischen Routings in den genannten Ansichten (mit Sicherheit eine bessere Lösung) verwendet wird. Die leere Seite wird angezeigt
Die verbesserte Version mit benannten Ansichten in einem Tab finden Sie hier: http://plnkr.co/edit/Mj0rUxjLOXhHIelt249K?p=preview
Targeting benannter Ansichten:
quelle
.run ($state) { console.log($states.get()); });
Ich bin gerade hierher gekommen, um zu erzählen, was mit mir passiert ist.
Sie müssen das übergeordnete Element nicht angeben. Status funktionieren dokumentorientiert. Anstatt also parent: app anzugeben, können Sie den Status einfach in app.index ändern
BEARBEITEN Warnung, wenn Sie tief in die Verschachtelung eintauchen möchten, muss der vollständige Pfad angegeben werden. Zum Beispiel können Sie keinen Zustand wie haben
ohne eine zu haben
oder Angular löst eine Ausnahme aus, die besagt, dass der Router nicht ermittelt werden kann. Um dies zu lösen, können Sie abstrakte Zustände definieren
quelle
EDIT Warning, if you want to go deep in the nesting, the full path must me specified. For example, you can't have a state like
, das war mein Problem.url
Eigenschaft des mittleren Status ausschließen können. Anschließend wird die folgende Routeurl
angehängt die vorherige Route URL.Ich hatte gerade das gleiche Problem mit Ionic.
Es stellte sich heraus, dass nichts mit meinem Code nicht stimmte. Ich musste einfach die Ionic Serve-Sitzung beenden und Ionic Serve erneut ausführen.
Nachdem ich wieder in die App zurückgekehrt war, funktionierten meine Zustände einwandfrei.
Ich würde auch vorschlagen, ein paar Mal auf Speichern in Ihrer app.js-Datei zu klicken, wenn Sie gulp ausführen, um sicherzustellen, dass alles neu kompiliert wird.
quelle
Ich hatte einen Fall, in dem der Fehler von a geworfen wurde
Welches ist offensichtlich. Ich denke, das kann jemandem in Zukunft helfen.
quelle
Hatte das gleiche Problem mit dem ionischen Routing.
Eine einfache Lösung besteht darin, den Namen des Staates zu verwenden - im Grunde genommen
state.go(state name)
Und in Controller können Sie verwenden
$state.go('tab.search');
quelle
Wie von Magus beantwortet:
Abstrakte Zustände können verwendet werden, um allen untergeordneten Status-URLs ein Präfix hinzuzufügen. Beachten Sie jedoch, dass Abstract noch eine UI-Ansicht benötigt, damit seine Kinder es füllen können . Dazu können Sie es einfach inline hinzufügen.
Weitere Informationen finden Sie in der Dokumentation: https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views
quelle