Nested Tabs and ui-router


#1

Hi all,
for a project I have to create two level of tabs and navigate through them (sorry but the page is in Italian language).

The bottom tabs guide the first level of tabs, while the top one the second level.
With the navigation it’s all ok, but when I try to see the item details I can’t figure out what’s wrong with my configuration:

$stateProvider
    .state('signin', {
      url: "/sign-in",
      templateUrl: "templates/sign-in.html",
      controller: 'SignInCtrl'
    })
    // setup an abstract state for the tabs directive
    .state('tab', {
    url: '/tab',
    abstract: true,
    templateUrl: 'templates/tabs.html'
    })
    .state('tab.dash', {
    url: '/dashboard',
    views: {
      'tab-dash': {
        templateUrl: 'templates/tab-dash.html',
        controller: 'DashCtrl'
      }
    }
    })
    .**state('tab.profile', {**
    url: "/profile",  
    **abstact:true,**
    **views: {**
        **'tab-profile': {**
            **templateUrl: "templates/tab-profile.html"**
        **}**
    **}**
    **})**
    **.state('tab.profile.campionati', {**
    **url: '/campionati',**
    **views: {**
      **'profile-page': {**
        **templateUrl: 'templates/profile/tab-campionati.html',**
        **controller: 'DashCtrl'**
      **}**
    **}**
    **})**
    **.state('tab.profile.calciatori', {**
    **url: '/calciatori',**
    **views: {**
      **'profile-page': {**
        **templateUrl: 'templates/profile/tab-calciatori.html',**
        **controller: 'PlayerProfileCtrl'**
      **}**
    **}**
    **})**
    **.state('tab.profile.calciatori.guest', {**
      **url: '/guest/:id',**
      **views: {**
        **'stocaxxo': {**
          **templateUrl: 'templates/calciatore/profilo-guest.html',**
          **controller: 'PlayerProfileCtrl'**
        **}**
      **}**
    **})**
    .state('tab.profile.polisportive', {
    url: '/polisportive',
    views: {
      'profile-page': {
        templateUrl: 'templates/profile/tab-polisportive.html',
        controller: 'FollowCtrl'
      }
    }
    })
    .state('tab.follow', {
      url: '/follow',
      views: {
        'tab-follow': {
          templateUrl: 'templates/tab-follow.html',
          controller: 'FollowCtrl'
        }
      }
    })
    .state('tab.chat.detail', {
      url: '/chats/:chatId',
      views: {
        'tab-chats': {
          templateUrl: 'templates/tab-details.html',
          controller: 'ChatDetailCtrl'
        }
      }
    })
    .state('tab.contact', {
      url: '/contact',
      views: {
        'tab-contacts': {
          templateUrl: 'templates/tab-contact.html',
          controller: 'ChatDetailCtrl'
        }
      }
    })
    .state('tab.info', {
    url: '/info',
    views: {
      'tab-info': {
        templateUrl: 'templates/tab-info.html',
        controller: 'AccountCtrl'
      }
    }
    });

  $urlRouterProvider.otherwise('/sign-in');

The tab.profile.calciatori and tab.profile.calciatori.guest are the parts of the code is where I configured the navigation from the list of items to the details page. The second level of tabs is in the page ‘templates/tab-profile.html’:

<ion-view title="DASHBOARD">
    <ion-tabs class="tabs-striped tabs-top tabs-background-dark tabs-color-light">
        <ion-tab title="CAMPIONATI" ui-sref="tab.profile.campionati">
                championships
        </ion-tab>
        <ion-tab title="CALCIATORI" ui-sref="tab.profile.calciatori">
                soccer players
        </ion-tab>
        <ion-tab title="POLISPORTIVE" ui-sref="tab.profile.polisportive">
                sports clubs
        </ion-tab>
    </ion-tabs>
    <ui-view name="profile-page"></ui-view>
</ion-view>

and the page with the url to details page is:

<ion-view view-title="CALCIATORI">
  <ion-content class="has-header has-subheader">
    <ion-list>
      <ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="profile in profiles" type="item-text-wrap" ui-sref="tab.profile.calciatori.guest({ id: profile.id})">
        <img ng-src="{{profile.avatar}}">
        <h2>{{profile.name}} {{profile.surname}}</h2>
        <p>{{profile.ruolo}}</p>
        <i class="icon ion-chevron-right icon-accessory"></i>

        <ion-option-button class="button-assertive" ng-click="remove(chat)">
          Delete
        </ion-option-button>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

please help me.
Thanks
Danilo