如何在不使用ng-router的情况下将内容放入ion-tabs中？ [英] How to put content within ion-tabs without the use of ng-router?

问题描述

让我们快点。

这是离子标签的常规行为

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

the reason why I do not need $stateProvider is because I am just hiding and showing some divs. I created this Plnkr for you to check what I want to achieve, in the notes of this Plnkr in the code you can see the necessary notes to understand.

让我告诉你一些我正在使用的代码，首先，这是 ion-tabs ：

Let me show you some of the code that I am working with, first, this are the 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>

在这里你可以看到我想在这些标签上显示的信息：

and here you can see the information that I want to display on those 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>

所以，最后，我想要的是喜欢这个但是我粘贴的第一个链接的行为。

so, at the end, what I want is something like this but with the behavior of the first link I paste above.

推荐答案

我有同样的问题，我这样修好了。

I had the same problem, I fixed it like this.

<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>

这篇关于如何在不使用ng-router的情况下将内容放入ion-tabs中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！