Issue with Ui-router

ionic-v1
1

Hi,
I´m new using Ionic and UI-router so maybe this is an obvious question, but it´s driving me crazy. I´m trying to implement a child state but I can´t get my child template to be displayed. I´m able to reproduce the issue based on the tabs Ionic app template.
What I changed is:
app.js:
.state(‘tab.friends’, {
url: ‘/friends’,
views: {
‘tab-friends’: {
templateUrl: ‘templates/tab-friends.html’,
controller: ‘FriendsCtrl’
}
}
})
.state(‘tab.friend-detail’, {
url: ‘/friend/:friendId’,
views: {
‘tab-friends’: {
templateUrl: ‘templates/friend-detail.html’,
controller: ‘FriendDetailCtrl’
}
}
})
.state(‘tab.friend-detail.offer’, {
url: ‘/detail/:offer’,
views: {
‘tab-friends’: {
templateUrl: ‘templates/dashDetail.html’,
controller: ‘DashDetailCtrl’
}
}
})

I created an empty DashDetailCtrl and a simple dashDetail.html template (static text). I call the tab.friend-detail.offer state by:
ui-sref=“tab.friend-detail.offer({offer:2})”

The route seems to be recognized because I don´t get redirected to the default state, but for whatever reason neither my DashDetailCtrl controller not the template are invoked. It just displays the parent template.

As a side note, based on ui-router recommendations, shouldn´t the tabs.html template use ui-sref instead of href? I understood not using URL but state names to route it´s one of the ui-router benefits.

2

can you open a codepen with ur code

3

Hi,
I found the issue. As per angular you need a ui-view in the parent state. An I found:

  • it has to be in it´s direct parent (not upper in the hierarchy)
  • In ionic this means having ion-nav-view (not ion-view)

At he end I had to create an abstract state and make my parent and children states to inherit from the abstract. I find this counter intuitive as my states are now sibilings instead of parent and child. But it´s the only it worked without creating nested ion-nav-view which confused the navigation system.

4

I have the same issue… is not intuitive at all.

If I have tabs with an abstract state called tabs, my default route would be the first tab i.e tabs.first. If tabs.first has a child tabs.first.child and also this state has a child, tabs.first.child.grandchild this means that all these states would be updating the same view and generating transitions in that view.

In any case, the state is changed, but the ion-nav-view won’t load the content nor the controller will be called if you go deeper than 2 levels.

By needing to create abstract views to each level totally breaks the purpose of nested views. Is that right?