'...' konnte nicht aus dem Zustand '' aufgelöst werden

98

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?

Sefa
quelle
Das ist etwas albern, aber ich sehe, dass Sie das Modul 'myApp' erstellen und 'ionic' als Abhängigkeit auflisten. Ich sehe jedoch nicht, dass 'ui-router' als Abhängigkeit aufgeführt ist. Schließen Sie es woanders ein?
Deadbabykitten
3
@deadbabykitten, ionic kümmert sich darum.
Rogers Sampaio
1
@RogersSampaio - Ich habe kürzlich herausgefunden, dass ich zuvor noch kein ionisches Produkt verwendet habe, es aber jetzt für ein mobiles Projekt verwende. Es ist ziemlich unglaublich.
Deadbabykitten

Antworten:

69

Diese Art von Fehler bedeutet normalerweise, dass einige Teile des (JS) -Codes nicht geladen wurden. Dass der Zustand, in dem er sich ui-srefbefindet, 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:

.config(function($stateProvider, $urlRouterProvider){
  $urlRouterProvider.otherwise("/index.html");

    $stateProvider

    .state('app', {
      abstract: true,
      templateUrl: "tpl.menu.html",
    })

  $stateProvider.state('index', {
    url: '/',
    templateUrl: "tpl.index.html",
    parent: "app",
  });


  $stateProvider.state('register', {
    url: "/register",
    templateUrl: "tpl.register.html",
    parent: "app",
  });

  $urlRouterProvider.otherwise('/');
}) 

Und hier haben wir die übergeordnete Ansicht mit Registerkarten und deren Inhalt:

<ion-tabs class="tabs-icon-top">

  <ion-tab title="Index" icon="icon ion-home" ui-sref="index">
    <ion-nav-view name=""></ion-nav-view>
  </ion-tab>

  <ion-tab title="Register" icon="icon ion-person" ui-sref="register">
    <ion-nav-view name=""></ion-nav-view>
  </ion-tab>

</ion-tabs>

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

  <ion-tab title="Index" icon="icon ion-home" ui-sref="index">
    <ion-nav-view name="index"></ion-nav-view>
  </ion-tab>

  <ion-tab title="Register" icon="icon ion-person" ui-sref="register">
    <ion-nav-view name="register"></ion-nav-view>
  </ion-tab>

Targeting benannter Ansichten:

  $stateProvider.state('index', {
    url: '/',
    views: { "index" : { templateUrl: "tpl.index.html" } },
    parent: "app",
  });


  $stateProvider.state('register', {
    url: "/register",
    views: { "register" : { templateUrl: "tpl.register.html", } },
    parent: "app",
  });
Radim Köhler
quelle
Meine Routen sehen in Ordnung aus, ich habe andere Ionenbeispiele überprüft und mein Code sieht gleich aus. Ich habe einen Debugger, console.log und einen Alarm in diese Konfigurationsfunktion eingefügt und keiner von ihnen ausgeführt. Wie kann ich sicherstellen, dass meine Routen geladen sind? kann ich sie irgendwie sehen?
Sefa
4
Wenn ich neugierig bin, welche Zustände registriert sind, füge ich normalerweise $ state info der .run () -Methode hinzu. Dann können Sie console.log ($ States.get ()) ausführen, das ein Array von Zuständen zurückgibt. .run ($state) { console.log($states.get()); });
Deadbabykitten
37

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

.config(function($stateProvider, $urlRouterProvider){
    $urlRouterProvider.otherwise("/index.html");

$stateProvider.state('app', {
  abstract: true,
  templateUrl: "tpl.menu.html"
});

$stateProvider.state('app.index', {
    url: '/',
    templateUrl: "tpl.index.html"
});

$stateProvider.state('app.register', {
    url: "/register",
    templateUrl: "tpl.register.html"
});

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

app.cruds.posts.create

ohne eine zu haben

app
app.cruds
app.cruds.posts

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

.state('app', {
     url: "/app",
     abstract: true
})
.state('app.cruds', {
     url: "/app/cruds",
     abstract: true
})
.state('app/cruds/posts', {
     url: "/app/cruds/posts",
     abstract: true
})
Magus
quelle
9
Danke dafür 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.
Max
Ich hatte das gleiche Problem wie oben, wollte aber auch etwas in meinen Statusnamenpfad aufnehmen, das nicht im Routenpfad angezeigt wird, sodass Sie die urlEigenschaft des mittleren Status ausschließen können. Anschließend wird die folgende Route urlangehängt die vorherige Route URL.
Nick M
7

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.

Greg Quinn
quelle
1
In meinem Fall hat ein Neustart des Servers das Problem nicht gelöst, aber mir geholfen, einen besseren Fehler beim Debuggen zu haben. Vielen Dank!
Magus
2

Ich hatte einen Fall, in dem der Fehler von a geworfen wurde

$state.go('');

Welches ist offensichtlich. Ich denke, das kann jemandem in Zukunft helfen.

PM
quelle
2

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)

.state('tab.search', {
    url: '/search',
    views: {
      'tab-search': {
        templateUrl: 'templates/search.html',
        controller: 'SearchCtrl'
      }
    }
  })

Und in Controller können Sie verwenden $state.go('tab.search');

Siva Dorai
quelle
1

Wie von Magus beantwortet:

Den vollständigen Pfad muss ich angeben

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.

.state('app', {
   url: "/app",
   abstract: true,
   template: '<ui-view/>'
})

Weitere Informationen finden Sie in der Dokumentation: https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views

Cecile
quelle