Sliding to a child screen in a tab ion nav view


#1

I have this in my app.js

.state('tab.events', {
            url: "/events",
            views: {
                'tab-events': {
                    templateUrl: "templates/events/List.html",
                    controller: 'EventsListController'
                }
            }
        })

        .state('tab.events.details', {
            url: "/:eventId",
            views: {
                'tab-events': {
                    templateUrl: "templates/events/Details.html",
                    controller: 'EventDetailsController'
                }
            }
        })

This is List.html

...
 			    <ion-list>
			      	<ion-item ng-repeat="event in all_events.models" type="item-text-wrap" ui-sref="tab.events-details({eventId:event.id})" class="item item-icon-right">
			        {{event.name}}
			      	</ion-item>
			    </ion-list>
...	

This is Details.html

<ion-view title="Event">
	<ion-content>    
		<div class="row">
			<div class="col">
 			    DETAILS HERE
			</div>
		</div>
	</ion-content>
</ion-view>

This is my tabs.html which is within a ion-side-menu-content block as my app has tabs as well as a sidemenu.

...
<ion-tab title="Events" icon="icon ion-calendar"  id="tab-events" ui-sref="tab.events">
                        <ion-nav-view name="tab-events" class="slide-left-right"></ion-nav-view>
                    </ion-tab>
...

When clicking on an event, it doesnt slide to Details.html, Yet when i change the state and ui-sref from tab.events.details to tab.events-details and it works. Am i right in saying that by changing the details state that it is no longer a child of list? Why, when i set details it to be a child of list, that it refuses to slide?


#2

I managed to put this plunker together, i combined the tabs and sidemenu projects and modified the sats in app.js and can confirm that nested states dont open.

.state('tab.friends', {
  url: '/friends',
  views: {
    'tab-friends': {
      templateUrl: 'tab-friends.html',
      controller: 'FriendsCtrl'
    }
  }
})
.state('tab.friends.detail', {
  url: '/:friendId',
  views: {
    'tab-friends': {
      templateUrl: 'friend-detail.html',
      controller: 'FriendDetailCtrl'
    }
  }
})