一個選項卡的離子多視圖狀態

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> 

當上的 「＃/優惠券」 的項目，點擊我想要去的網址爲「＃/單曲/ 「，然後是」＃/ 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」。這裏的關鍵是爲每個這些州的「朋友」命名視圖，這對應於該選項卡的ion-nav-view名稱。