无法从国家解决’...’

这是我第一次尝试使用 ui 路由器。

这是我的应用程序

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

如你所见，我有两个状态，我试图注册这样的状态:

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

但我现在

无法从状态解析‘ register’”

例外，有什么问题吗？

161513 次浏览
小开
最佳答案

This kind of error usually means that some parts of (JS) code were not loaded. That the state which is inside of ui-sref is missing.

There is a working example

I am not an expert in ionic, so this example should show that it would be working, but I used some more tricks (parent for tabs)

This is a bit adjusted state 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('/');
})

And here we have the parent view with tabs, and their content:

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

Take it more than an example of how to make it running and later use ionic framework the right way...Check that example here

Here is similar Q & A with an example using the named views (for sure better solution) ionic routing issue, shows blank page

Improved version with named views in a tab is here: 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 named views:

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

I've just had this same issue with Ionic.

It turns out nothing was wrong with my code, I simply had to quit the ionic serve session and run ionic serve again.

After going back into the app, my states worked fine.

I would also suggest pressing save on your app.js file a few times if you are running gulp, to make sure everything gets re-compiled.

小开

Just came here to share what was happening to me.
You don't need to specify the parent, states work in an document oriented way so, instead of specifying parent: app, you could just change the state to 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 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

app.cruds.posts.create

without having a

app
app.cruds
app.cruds.posts

or angular will throw an exception saying it can't figure out the rout. To solve that you can define abstract states

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

Had the same issue with Ionic routing.

Simple solution is to use the name of the state - basically state.go(state name) 

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

And in controller you can use $state.go('tab.search');

小开

I had a case where the error was thrown by a 

$state.go('');

Which is obvious. I guess this can help someone in future.

小开

As answered by Magus :

the full path must me specified

Abstract states can be used to add a prefix to all child state urls. But note that abstract still needs a ui-view for its children to populate. To do so you can simply add it inline.

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

For more information see documentation : https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views


提交答案