angularjs - componentes - directivas angular4
No se pudo resolver ''...'' del estado '''' (6)
Esta es la primera vez que intento usar el enrutador ui.
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 me estoy poniendo
No se pudo resolver el ''registro'' del estado ''''
excepción. ¿Cuál es el problema aquí?
Acabo de tener este mismo problema con Ionic.
Resulta que nada estaba mal con mi código, simplemente tuve que abandonar la sesión de servicio iónico y ejecutar el servicio iónico nuevamente.
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.
Como respondió Magus:
la ruta completa debe especificarse
Los estados abstractos se pueden usar para agregar un prefijo a todas las URL de estado secundario. Pero tenga en cuenta que el resumen todavía necesita una vista de interfaz de usuario para que sus hijos se llenen . 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
Este tipo de error generalmente significa que alguna parte del código (js) no se cargó.
Que falta el estado que está dentro de
ui-sref
.
No soy un experto en iónico, por lo que estos ejemplos deberían mostrar que funcionaría, pero utilicé algunos trucos más (padre para pestañas)
Este es un estado de ajuste de bit 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(''/'');
})
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 use el marco iónico de la manera correcta ... Consulte ese ejemplo aquí
Aquí hay preguntas y respuestas similares con un ejemplo que usa el problema de enrutamiento iónico de las vistas nombradas (seguramente una mejor solución) , muestra la página en blanco
La versión mejorada con vistas con nombre en la 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>
segmentar vistas con nombre:
$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",
});
Solo vine a compartir lo que me estaba pasando.
No necesita especificar el padre, los estados funcionan de forma orientada a documentos, por lo que, en lugar de especificar el padre: aplicación, simplemente 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, la ruta completa debe especificarse. 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 resolver 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
})
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 puede usar
$state.go(''tab.search'');
Tuve un caso donde el error fue arrojado por un
$state.go('''');
Lo cual es obvio. Supongo que esto puede ayudar a alguien en el futuro.