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

时间:2015-01-26 22:47:31

标签: angularjs ionic-framework

让我们快点。

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,但我粘贴的第一个链接的行为。

1 个答案:

答案 0 :(得分: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>