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

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?

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",
  });

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
})

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.

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.

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');

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