No se pudo resolver '...' del estado ''


98

Esta es la primera vez que intento utilizar ui-router.

Aquí está mi 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'
  });
})

Como puede ver, tengo dos estados. Estoy tratando de registrar un estado como este:

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

Pero estoy consiguiendo

No se pudo resolver el 'registro' del estado ''

excepción. ¿Cuál es el problema aquí?


Esto es un poco tonto, pero veo que está creando el módulo 'myApp' y está enumerando 'ionic' como una dependencia, sin embargo, no veo 'ui-router' enumerado como una dependencia. ¿Lo vas a incluir en otro lugar?
deadbabykitten

3
@deadbabykitten, ionic se encarga de eso.
Rogers Sampaio

1
@RogersSampaio - Me acabo de enterar hace poco, no había usado iónico antes, pero ahora lo estoy usando para un proyecto móvil. Es bastante increible.
deadbabykitten

Respuestas:


69

Este tipo de error generalmente significa que algunas partes del código (JS) no se cargaron. Que ui-sreffalta el estado que está dentro .

Hay un ejemplo de trabajo

No soy un experto en iónico, por lo que este ejemplo debería mostrar que funcionaría, pero usé algunos trucos más (padre para pestañas)

Esta es una definición de estado poco ajustada:

.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('/');
}) 

Y aquí tenemos la vista principal con pestañas y su contenido:

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

Tómelo más que un ejemplo de cómo hacerlo funcionar y luego usar el marco iónico de la manera correcta ... Vea ese ejemplo aquí

Aquí hay preguntas y respuestas similares con un ejemplo usando las vistas nombradas (sin duda una mejor solución) problema de enrutamiento iónico, muestra una página en blanco

La versión mejorada con vistas nombradas en una pestaña está aquí: 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>

segmentación de vistas nombradas:

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

Mis rutas se ven bien, verifiqué otros ejemplos iónicos y mi código se ve igual. Puse algún depurador, console.log y alerta en esa función de configuración y ninguno de ellos se ejecutó. ¿Cómo puedo asegurarme de que mis rutas estén cargadas? ¿Puedo verlos de alguna manera?
Sefa

4
Si tengo curiosidad por ver qué estados están registrados, normalmente inyectaré $ state info con el método .run (). Luego puede hacer console.log ($ states.get ()) que devolverá una matriz de estados. .run ($state) { console.log($states.get()); });
deadbabykitten

37

Solo vine aquí para compartir lo que me estaba pasando.
No es necesario especificar el padre, los estados funcionan de una manera orientada al documento, por lo que, en lugar de especificar padre: aplicación, puede cambiar el estado a 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"
});

EDITAR Advertencia, si desea profundizar en el anidamiento, debe especificar la ruta completa. Por ejemplo, no puedes tener un estado como

app.cruds.posts.create

sin tener un

app
app.cruds
app.cruds.posts

o angular lanzará una excepción diciendo que no puede averiguar la ruta. Para resolver eso puedes definir estados abstractos

.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
Gracias 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, ese fue mi problema.
Máximo

Tuve el mismo problema que el anterior, pero también quería incluir algo en la ruta del nombre de mi estado que no se reflejaría en la ruta de la ruta, por lo que puede excluir la urlpropiedad del estado intermedio, y luego urlse agregará la siguiente ruta a la URL de la ruta anterior.
Nick M

7

Acabo de tener el mismo problema con Ionic.

Resulta que no había nada malo en mi código, simplemente tuve que salir de la sesión de servicio iónico y ejecutar el servicio iónico de nuevo.

Después de volver a la aplicación, mis estados funcionaron bien.

También sugeriría presionar guardar en su archivo app.js varias veces si está ejecutando gulp, para asegurarse de que todo se vuelva a compilar.


1
En mi caso, reiniciar el servidor no resolvió el problema, pero me ayudó a tener un mejor error para depurar. ¡Gracias!
Magus

3

Tuve el mismo problema con el enrutamiento iónico.

La solución simple es usar el nombre del estado, básicamente state.go(state name)

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

Y en el controlador puedes usar $state.go('tab.search');


2

Tuve un caso en el que el error fue lanzado por un

$state.go('');

Que es obvio. Supongo que esto puede ayudar a alguien en el futuro.


1

Como respondió Magus:

la ruta completa debe ser especificada

Los estados abstractos se pueden usar para agregar un prefijo a todas las URL de los estados secundarios. Pero tenga en cuenta que el resumen todavía necesita una vista de interfaz de usuario para que lo completen sus hijos . Para hacerlo, simplemente puede agregarlo en línea.

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

Para obtener más información, consulte la documentación: https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.