Ионные состояния множественного представления для одной вкладки

Question

У меня есть настройка с четырьмя вкладками, и она работает точно так же, как хотелось бы.

На одном из вкладок, однако, я хочу, чтобы внутри него было три состояния. Причина в том, что я хочу, чтобы вкладка оставалась активной, но показывая разные состояния контента. Я добавил два дополнительных состояния, добавив «скрытые» вкладки, но затем значок вкладки внизу больше не «активен» при использовании дополнительных состояний.

Как я могу сделать это так, чтобы иметь несколько состояний для одной вкладки, сохраняя при этом значок этой вкладки все время? Я хотел бы упомянуть, что я хочу сохранить функциональность обратно <.

App.Config

.config(function($stateProvider, $urlRouterProvider) { 
    $stateProvider 
    .state('welcome', { 
    url:'/', 
    templateUrl:'templates/welcome.html', 
    controller:'WelcomeCtrl' 
    }) 
    .state('sign-up', { 
    url: '/sign-up', 
    templateUrl: 'templates/sign-up.html', 
    controller: 'SignUpCtrl' 
    }) 
    .state('forgot-password', { 
    url:'/forgot-password', 
    templateUrl:'templates/forgot-password.html', 
    controller:'ForgotPasswordCtrl' 
    }) 

    .state('tabs', { 
    url:'/tab', 
    abstract:true, 
    templateUrl:'templates/tabs.html' 
    }) 
    .state('tabs.map', { 
    url:'/map', 
    views: { 
     'map-tab':{ 
     templateUrl:'templates/map.html', 
     controller:'MapCtrl' 
     } 
    } 
    }) 
    .state('tabs.favorites', { 
    url:'/favorites', 
    views: { 
     'favorites-tab':{ 
     templateUrl:'templates/favorites.html', 
     controller:'FavoritesCtrl' 
     } 
    } 
    }) 
    .state('tabs.coupons', { 
    url:'/coupons', 
    views: { 
     'coupons-tab':{ 
     templateUrl:'templates/coupons.html', 
     controller:'CouponsCtrl' 
     } 
    } 
    }) 
    .state('singles', { 
    url:'/singles/{location_id:\\d+}', 
    cache: false, 
    templateUrl:'templates/singles.html', 
    controller:'SinglesCtrl' 
    }) 
    .state('coupon', { 
    url:'/coupon/{location_id:\\d+}/{coupon_id:\\d+}', 
    cache: false, 
    templateUrl:'templates/coupon.html', 
    controller:'CouponCtrl' 
    }) 
    .state('tabs.settings', { 
    url:'/settings', 
    views: { 
     'settings-tab':{ 
     templateUrl:'templates/settings.html', 
     controller:'SettingsCtrl' 
     } 
    } 
    }) 

    $urlRouterProvider.otherwise('/'); 
}) 

Tabs.html

<ion-tabs id="app-tabs" class="tabs-icon-top"> 

    <ion-tab title="Coupons" icon-on="coupon-active" icon-off="coupon-inactive" href="#/tab/coupons"> 
    <ion-nav-view name="coupons-tab"></ion-nav-view> 
    </ion-tab> 

    <ion-tab title="Map" icon-on="map-active" icon-off="map-inactive" href="#/tab/map"> 
    <ion-nav-view name="map-tab"></ion-nav-view> 
    </ion-tab> 

    <ion-tab title="Favorites" icon-on="favorite-active" icon-off="favorite-inactive" href="#/tab/favorites"> 
    <ion-nav-view name="favorites-tab"></ion-nav-view> 
    </ion-tab> 

    <ion-tab title="Settings" icon-on="settings-active" icon-off="settings-inactive" href="#/tab/settings"> 
    <ion-nav-view name="settings-tab"></ion-nav-view> 
    </ion-tab> 

</ion-tabs> 

При нажатии на элементе "#/купонами" URL-адрес, я пытаюсь идти на это «#/синглов/», а затем« #/coupon // », и я хочу, чтобы синглы и купон (единственное число) были частью вкладки« Купоны ».

Answer 1

Было бы хорошо, чтобы увидеть пример того, что именно вы хотите, но если я интерпретации права, вы могли бы что-то вроде:

tabs.html

<ion-tabs class="tabs-icon-top tabs-positive"> 

    <ion-tab title="Profile" icon-off="ion-person" icon-on="ion-person" href="#/app/profile/{{currentUser.id}}"> 
     <ion-nav-view name="feed"></ion-nav-view> 
    </ion-tab> 

    <ion-tab title="Friends" icon-off="ion-person-stalker" icon-on="ion-person-stalker" href="#/app/friends"> 
     <ion-nav-view name="friends"></ion-nav-view> 
    </ion-tab> 

</ion-tabs> 

app.js

.state('app', { 
    url: "/app", 
    abstract: true, 
    templateUrl: "templates/tabs.html", 
    controller: 'AppCtrl' 
}) 

.state('app.feed', { 
    url: "/feed", 
    views: { 
    'feed' :{ 
     templateUrl: "templates/feed.html", 
     controller: 'FeedCtrl' 
    } 
    } 
}) 
.state('app.friends', { 
     url: "/friends", 
     views: { 
     'friends' :{ 
      templateUrl: "templates/friends.html", 
      controller: 'FriendsCtrl' 
     } 
     } 
    }) 
.state('app.add-friends', { 
     url: "/add-friends", 
     views: { 
     'friends' :{ 
      templateUrl: "templates/add-friends.html", 
      controller: 'AddFriendsCtrl' 
     } 
     } 
    }) 
.state('app.do-something', { 
     url: "/do-something", 
     views: { 
     'friends' :{ 
      templateUrl: "templates/do-something.html", 
      controller: 'DoSomethingCtrl' 
     } 
     } 
    }) 

Обратите внимание, что есть три состояния для вкладки друзей: «app.friends», «app.add-friends» и «app.do-something». Ключевым моментом здесь является присвоение наименований для каждого из друзей этих государств, что соответствует названию иона-навигации на вкладке.