Issues with Nested States in UI-Router

Question

I'm having an issue with nested states in UI-Router. I have a two states, and upon button click it should transition to another state, and the url changes, but the template does not. Here is my code for the state logic:

$stateProvider.state('accounts', {
url: '/accounts',
views: {
  'menu': {
    templateUrl: 'templates/menu.html',
    controller: 'MenuController'
  },
  'main': {
    templateUrl: 'templates/accounts.html',
    controller: 'AccountsController'
  }
}
});
$stateProvider.state('accounts.detail', {
url: '/:accountID',
views: {
  'main': {
    templateUrl: 'templates/accounts.detail.html',
    controller: 'AccountsDetailController'
  }
}
});

And my button logic: $state.go('accounts.detail', { accountID : account.accountID});

Both of my views are wrapped up in ui-view tags. All other root states work correctly (/home, /orders) however /accounts/:accountID will not trigger the template to load and transition. Any insight will be greatly appreciated.

No, I am unsure of what that is. I am using ionic and that is my sole framework. It comes bundled with ui-router and angular — mattchue
– mattchue, Commented Feb 20, 2015 at 23:41
Sounds like the template of the accounts state is missing a <ui-view /> tag, that would explain the route change but no template. What I'm unsure of though, is in which template (menu.html or accounts.html) you should define that ui-view tag in. — ms87
– ms87, Commented Feb 20, 2015 at 23:56
it's there, ion-view is the ionic equivalent: ionicframework.com/docs/api/directive/ionView — mattchue
– mattchue, Commented Feb 21, 2015 at 0:00

dakna · Accepted Answer · 2015-02-24 09:38:27Z

1

<ion-view /> is not the equivalent of <ui-view />, in Ionic Framework it is just a container to insert header/footer bars and content.

use <ion-nav-view /> http://ionicframework.com/docs/api/directive/ionNavView/ and reference by name this nested view in your parent view: <ion-nav-view name="main" />

answered Feb 24, 2015 at 9:38

dakna

3111 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

mattchue · Accepted Answer · 2015-02-24 18:14:13Z

0

My issue was that I wasn't referring to my views correctly. Because of how they are nested, I needed to use the absolute name to cause the view to show. The linked UI-router documentation describes my issue.

https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views#view-names---relative-vs-absolute-names

answered Feb 24, 2015 at 18:14

mattchue

1212 silver badges10 bronze badges

Collectives™ on Stack Overflow

Issues with Nested States in UI-Router

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related