CODEWITHSUNDEEP
angularjsionic-frameworkangular-ui-router
mattchue
mattchue

Reputation: 121

Issues with Nested States in UI-Router

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.

Upvotes: 0

Views: 454

Answers (2)

mattchue
mattchue

Reputation: 121

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

Upvotes: 0

dakna
dakna

Reputation: 311

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

Upvotes: 1

Related Questions