Как разместить контент в ионных вкладках без использования ng-router?

Question

Позволяет быстро.

This is the regular behavior of ion-tabs

причина, почему мне не нужно $stateProvider потому, что я просто скрывается и показывая некоторые дивы. Я создал 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, но с поведением первой ссылки, которую я вставляю выше.

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