0

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.

Improve this question
8
  • are you using jade? Show us the view Commented Feb 20, 2015 at 23:40
  • 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 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. Commented Feb 20, 2015 at 23:56
  • it's there, ion-view is the ionic equivalent: ionicframework.com/docs/api/directive/ionView Commented Feb 21, 2015 at 0:00
  • added menu.html for clarity Commented Feb 21, 2015 at 0:03

2 Answers 2

Reset to default
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" />

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

Comments

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

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.