如何在不使用 ng-router 的情况下将内容放在 ion-tabs 中？答案

【问题标题】：How to put content within ion-tabs without the use of ng-router?如何在不使用 ng-router 的情况下将内容放在 ion-tabs 中？
【发布时间】：2023-06-05 22:19:01
【问题描述】：

让我们快点。

This is the regular behavior of ion-tabs

我不需要$stateProvider 的原因是因为我只是在隐藏和显示一些 div。我创建了this Plnkr供你查看我想要实现的目标，在代码中这个Plnkr的注释中你可以看到必要的注释来理解。

让我向您展示一些我正在使用的代码，首先，这是ion-tabs：

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

    <ion-tab title="Home" icon="ion-home" ui-sref="#">
      <ion-nav-view></ion-nav-view>
    </ion-tab>

    <ion-tab title="About" icon="ion-ios-information" ui-sref="#">
      <ion-nav-view></ion-nav-view>
    </ion-tab>

    <ion-tab title="Contact" icon="ion-ios-world" ui-sref="#">
      <ion-nav-view></ion-nav-view>
    </ion-tab>

    <ion-tab title="WAJAJA" icon="ion-ios-world" ui-sref="#">
      <ion-nav-view></ion-nav-view>
    </ion-tab>

  </ion-tabs>

在这里您可以看到我想在这些选项卡上显示的信息：

<ion-view title="Bet Slip">
  <ion-content>

    <!--this info must be in HOME tab-->
    <ion-list ng-show="displayStraight">
      <div>STUFF</div>
    </ion-list>

    <!--this info must be in ABOUT tab-->
    <ion-list ng-show="displayParlayRobin">
      <div>MORE STUFF</div>
    </ion-list>

    <!--this info must be in CONTACT tab-->
    <ionlist ng-show="displayParlayIfBet">
      <div>OH NO! MORE STUFF</div>
    </ionlist>

    <!--this info must be in WAJAJA tab-->
    <ionlist ng-show="displayParlayTeaser">

      <div>OH YIZUS! MORE AND MORE STUFF</div>

    </ionlist>
  </ion-content>
</ion-view>

所以，最后，我想要的是 like this，但我在上面粘贴的第一个链接的行为。

【问题讨论】：

标签： angularjs ionic-framework

【解决方案1】：

我遇到了同样的问题，我是这样解决的。

<ion-view view-title="Tabs">
    <ion-pane>
        <ion-tabs class="tabs-bottom">

            <!-- Tab 1 -->
            <ion-tab title="Tab 1" href="#/tab/tab1">
                <ion-nav-view name="tab-tab1">
                    <ion-content>
                        Tab 1 content
                    </ion-content>

                </ion-nav-view>
            </ion-tab>


            <!-- Tab 2 -->
            <ion-tab title="Tab 1" href="#/tab/tab2">
                <ion-nav-view name="tab-tab2">
                    <ion-content>
                        Tab 2 content
                    </ion-content>
                </ion-nav-view>
            </ion-tab>
        </ion-tabs>

    </ion-pane>
</ion-view>

【讨论】：