App.Config中

Question

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

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

我怎样才能使一个标签有多个状态，同时保持标签的图标一直处于活动状态？我应该提一下，我想保持＆lt;还有功能。

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>

点击＆＃34;＃/优惠券＆＃34;中的项目时我试图去的网址是＆＃34;＃/ singles /＆＃34;其次是＆＃34;＃/ coupon //＆＃34;我希望单身和优惠券（单数）成为＆＃34;优惠券＆＃34;标签

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'
        }
      }
    })

请注意，朋友标签有三种状态，＆＃34; app.friends＆＃34;，＆＃34; app.add-friends＆＃34;和＆＃34; app.do-something＆＃34 ;。这里的关键是为每个状态＆＃39;朋友＆＃39;命名视图，这对应于标签的离子导航视图名称。

一个选项卡的离子多视图状态

App.Config中

Tabs.html

1 个答案: