web-dev-qa-db-fra.com

Impossible de résoudre '...' de l'état ''

C'est la première fois que j'essaie 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'essaie d'enregistrer un é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 'register' from state ''

exception. Quel est le problème ici?

angularjsangular-ui-router
95
Sefa

Ce type d'erreur signifie généralement qu'une partie du code (js) n'a pas été chargée. Que l'état qui est à l'intérieur de ui-sref est manquant.

Il y a n exemple de travail

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

C'est un état légèrement ajusté

.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 nous avons ici la vue parente avec les 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 pour le faire fonctionner, puis utilisez ionic framework dans le bon sens ... Vérifiez cet exemple ici

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

La version améliorée avec les vues nommées dans l'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",
  });
68
Radim Köhler

Je suis juste venu ici pour partager ce qui m'arrivait.
Il n'est pas nécessaire de spécifier le parent. Les états fonctionnent de manière orientée document. Par conséquent, 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 fond de l'imbrication, le chemin complet doit être spécifié. 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 lève 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
})
37
Magus

Je viens d'avoir ce même problème avec Ionic.

En fin de compte, mon code ne présentait aucun problème. Je devais simplement quitter la session de service ionic et relancer ionic.

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

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

7
Greg Quinn

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

La solution simple consiste à utiliser le nom de l’état - essentiellement 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
Siva Dorai

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.

2
P.M

Comme l'a répondu Magus:

le chemin complet doit être spécifié

Les états abstraits peuvent être utilisés pour ajouter un préfixe à toutes les URL d'états enfants. Mais notez que abstract a toujours besoin d’une vue ui pour que ses enfants soient 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, voir la documentation: https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views

1
cecile