Impossible de résoudre "…" à partir de l'état ""


98

C'est la première fois que j'essaye d'utiliser ui-router.

Voici mon 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'
  });
})

Comme vous pouvez le voir, j'ai deux états. J'essaye d'enregistrer l'état comme ceci:

<a ui-sref="register">
  <button class="button button-balanced">
    Create an account
  </button>
</a>

Mais je reçois

Impossible de résoudre le 'registre' à partir de l'état ''

exception. Quel est le problème ici?


C'est un peu idiot, mais je vois que vous créez le module «myApp» et que vous listez «ionic» comme dépendance, cependant, je ne vois pas «ui-router» comme une dépendance. L'incluez-vous ailleurs?
deadbabykitten

3
@deadbabykitten, ionic s'occupe de ça.
Rogers Sampaio le

1
@RogersSampaio - Je viens de découvrir que récemment, je n'avais jamais utilisé ionic auparavant, mais je l'utilise maintenant pour un projet mobile. C'est assez incroyable.
deadbabykitten

Réponses:


69

Ce type d'erreur signifie généralement que certaines parties du code (JS) n'ont pas été chargées. Que l'état qui est à l'intérieur ui-srefmanque.

Il y a un exemple de travail

Je ne suis pas un expert en ionique, donc cet exemple devrait montrer que cela fonctionnerait, mais j'ai utilisé quelques astuces supplémentaires (parent pour les onglets)

Il s'agit d'un état un peu ajusté 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('/');
}) 

Et ici, nous avons la vue parent avec des onglets, et leur contenu:

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

Prenez-le plus qu'un exemple de la façon de le faire fonctionner et d'utiliser plus tard le framework ionique de la bonne manière ... Vérifiez cet exemple ici

Voici des questions et réponses similaires avec un exemple utilisant le problème de routage ionique des vues nommées (pour une meilleure solution) , affiche une page vierge

La version améliorée avec des vues nommées dans un onglet est ici: 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>

ciblage des vues nommées:

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

Mes itinéraires semblent corrects, j'ai vérifié d'autres exemples ioniques et mon code a le même aspect. J'ai mis du débogueur, console.log et alerte dans cette fonction de configuration et aucun d'eux n'a été exécuté. Comment puis-je m'assurer que mes itinéraires sont chargés? puis-je les voir d'une manière ou d'une autre?
Sefa

4
Si je suis curieux de voir quels états sont enregistrés, je vais généralement injecter $ state info dans la méthode .run (). Ensuite, vous pouvez faire console.log ($ states.get ()) qui retournera un tableau d'états. .run ($state) { console.log($states.get()); });
deadbabykitten

37

Je suis juste venu ici pour partager ce qui m'arrivait.
Vous n'avez pas besoin de spécifier le parent, les états fonctionnent de manière orientée document, donc, au lieu de spécifier parent: app, vous pouvez simplement changer l'état en app.index

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

EDIT Attention, si vous voulez aller au plus profond de l'imbrication, le chemin complet doit me spécifier. Par exemple, vous ne pouvez pas avoir un état comme

app.cruds.posts.create

sans avoir un

app
app.cruds
app.cruds.posts

ou angular lancera une exception disant qu'il ne peut pas comprendre la déroute. Pour résoudre cela, vous pouvez définir des états abstraits

.state('app', {
     url: "/app",
     abstract: true
})
.state('app.cruds', {
     url: "/app/cruds",
     abstract: true
})
.state('app/cruds/posts', {
     url: "/app/cruds/posts",
     abstract: true
})

9
Merci pour 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, c'était mon problème.
Max

J'ai eu le même problème que ci-dessus, mais je voulais également inclure quelque chose dans le chemin de mon nom d'état qui ne serait pas reflété dans le chemin de la route, afin que vous puissiez exclure la urlpropriété de l'état intermédiaire, puis la route suivante urlsera ajoutée à l'url de l'itinéraire précédent.
Nick M

7

J'ai juste eu ce même problème avec Ionic.

Il s'avère que tout allait bien avec mon code, j'ai simplement dû quitter la session de service ionique et relancer le service ionique.

Après être retourné dans l'application, mes états ont bien fonctionné.

Je suggérerais également d'appuyer plusieurs fois sur save sur votre fichier app.js si vous exécutez gulp, pour vous assurer que tout est recompilé.


1
Dans mon cas, le redémarrage du serveur n'a pas résolu le problème mais m'a aidé à avoir une meilleure erreur à déboguer. Merci!
Magus

3

Eu le même problème avec le routage Ionic.

Une solution simple consiste à utiliser le nom de l'État - en gros state.go(state name)

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

Et dans le contrôleur, vous pouvez utiliser $state.go('tab.search');


2

J'ai eu un cas où l'erreur a été lancée par un

$state.go('');

Ce qui est évident. Je suppose que cela peut aider quelqu'un à l'avenir.


1

Comme l'a répondu Magus:

le chemin complet doit me spécifier

Les états abstraits peuvent être utilisés pour ajouter un préfixe à toutes les URL d'état enfant. Mais notez que le résumé a toujours besoin d'une vue d'interface utilisateur pour que ses enfants puissent être peuplés . Pour ce faire, vous pouvez simplement l'ajouter en ligne.

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

Pour plus d'informations, consultez la documentation: https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.