一个选项卡的离子多视图状态 [英] ionic multiple view states for one tab

问题描述

我有一个四个标签设置，它可以正常工作。

I have a four tab setup and it works just as desired.

然而，在其中一个标签上，我希望其中有三个状态。原因是因为我希望标签保持活动状态但显示不同的内容状态。我通过添加隐藏标签创建了两个额外的状态，但是当使用其他状态时，底部的标签图标不再活动。

On one of the tabs however, I want there to be three states inside it. Reason being because I want the tab to stay active but while showing different content states. I made two extra states by adding "hidden" tabs but then the tab icon at the bottom isn't "active" anymore when using the additional states.

我怎么能使它成为一个选项卡可以有多个状态同时保持该选项卡的图标一直处于活动状态？我应该提一下，我想保持<返回功能。

How can I make it so that I can have multiple states for one tab while keeping that tab's icon active the whole time? I should mention that I want to keep < back functionality as well.

.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

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>

点击＃/优惠券中的项目时我想去的网址是＃/ singles /后跟＃/ coupon //，我希望单曲和优惠券（单数）成为优惠券标签的一部分。

When clicking on an item in "#/coupons" the url I'm trying to go to is "#/singles/" followed by "#/coupon//" and I want singles and coupon (singular) to be part of the "Coupons" tab.

推荐答案

很高兴看到你想要的一个例子，但如果我正确解释你可以有类似的东西：

Would be nice to see an example of what exactly you want but if I'm interpreting right you could have something like:

tabs .html

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。这里的关键是为每个状态的朋友命名视图，这对应于选项卡的离子导航视图名称。

Note that there are three states for the friends tab, "app.friends", "app.add-friends", and "app.do-something". The key here is naming the views for each of these states 'friends', which corresponds to the tab's ion-nav-view name.

这篇关于一个选项卡的离子多视图状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！