Page with tabs after main menu

ionic-v1
1

Hello Ionic community.
I began recently to use Ionic (version 1 for the moment) and I’m sure I didn’t understood well tabs logic and I need your help.

I’m building an app with a main menu.
This main menu display several buttons. One of them give access to a page where the content is filtered through three tabs. (see the graphic)
image

image
Pasted image554×622 16.3 KB

My problems :
The content is loaded but not immediately
The back button is not always visible and I can’t exit to this page

Extract of the content of route.js

.state(‘page02’, {
url: ‘/page02’,
templateUrl: ‘templates/page02.html’,
controller: ‘page02Ctrl’
})

.state(‘mainparty’, {
url: ‘/mainparty’,
abstract: true,
templateUrl: ‘templates/mainparty.html’,
controller: ‘mainpartyCtrl’
})

  .state('mainparty.party-tc', {
      url: "/party-tc",
      views: {
          'party-tc': {
              templateUrl: "templates/party-tc.html",
              controller: 'party-tcCtrl'
          }
      }
  })
  .state('mainparty.party-wa', {
      url: "/party-wa",
      views: {
          'party-wa': {
              templateUrl: "templates/party-wa.html",
              controller: 'party-waCtrl'
          }
      }
  })
  .state('mainparty.party-pm', {
      url: "/party-pm",
      views: {
          'party-pm': {
              templateUrl: "templates/party-pm.html",
              controller: 'party-pmCtrl'
          }
      }
  });

Main page, to give access to other pages

<ion-view title="APP NAME" id="mainpage" class="" hide-nav-bar="true">
        <ion-header-bar class="bar bar-header bar-assertive">
            <h1 class="title">APP NAME</h1>
        </ion-header-bar>

        <ion-content scroll="false" class="center" overflow-scroll="false" >
            
                 <div class="padding">
                     <button ui-sref="page01" id="" class="button button-block button-positive button-royal">page 01</button>
                     <button ui-sref="page02" id="" class="button button-block button-positive button-assertive">page 02</button>
                     <button ui-sref="page03" id="" class="button button-block button-positive button-energized">page 03</button>
                     <button ui-sref="page04" id="" class="button button-block button-positive button-balanced">page 04</button>
                  </div>
            
    </ion-content>
    </ion-view>

Content of page02

   <ion-view title="PAGE 02" id="" class="" >
        <ion-nav-bar class="bar-assertive">
            <ion-nav-back-button class="button icon ion-arrow-left-c">
            </ion-nav-back-button>
        </ion-nav-bar>

        <ion-tabs class="tabs-striped tabs-icon-top tabs-color-assertive">
            <ion-tab title="To answer" icon-on="ion-android-funnel" icon-off="ion-android-funnel" ui-sref="mainparty.party-wa">
                <ion-nav-view name="party-wa"></ion-nav-view>
            </ion-tab>

            <ion-tab title="To come" icon-on="ion-android-funnel" icon-off="ion-android-funnel" ui-sref="mainparty.party-tc">
                <ion-nav-view name="party-tc"></ion-nav-view>
            </ion-tab>

            <ion-tab title="Passed" icon-on="ion-android-funnel" icon-off="ion-android-funnel" ui-sref="mainparty.party-pm">
                <ion-nav-view name="party-pm"></ion-nav-view>
            </ion-tab>

        </ion-tabs>

</ion-view>

Content of the tab container - mainparty (the same as page02 in fact

    <ion-view title="PAGE 02" id="" class="" >
            <ion-nav-bar class="bar-assertive">
                <ion-nav-back-button class="button icon ion-arrow-left-c">
                </ion-nav-back-button>
            </ion-nav-bar>

            <ion-tabs class="tabs-striped tabs-icon-top tabs-color-assertive">
                <ion-tab title="To answer" icon-on="ion-android-funnel" icon-off="ion-android-funnel" ui-sref="mainparty.party-wa">
                    <ion-nav-view name="party-wa"></ion-nav-view>
                </ion-tab>

                <ion-tab title="To come" icon-on="ion-android-funnel" icon-off="ion-android-funnel" ui-sref="mainparty.party-tc">
                    <ion-nav-view name="party-tc"></ion-nav-view>
                </ion-tab>

                <ion-tab title="Passed" icon-on="ion-android-funnel" icon-off="ion-android-funnel" ui-sref="mainparty.party-pm">
                    <ion-nav-view name="party-pm"></ion-nav-view>
                </ion-tab>

            </ion-tabs>

    </ion-view>

So it’s working partially and because a lot of examples I’ve seen on Internet are tabs oriented apps, the call of a “tabbed content” from another page is not clear for me and of course not satisfied of my work.

Thanks in advance for your help, I think any comment will be helpful.

Steven

2

@stevensotram why did you created mainparty inside page2. Maybe you can use only abstract page2 with tabs content, and navigate to page2.party-tc on button2 clicking?

If back button will not appear, you can try to add it manually

<ion-view title="news" class="news-view">
    <ion-nav-buttons side="left">
        <button class="button back-button buttons button-icon button-clear header-item" ng-click="$ionicGoBack()">
            <i class="icon ion-ios-arrow-left"></i>
        </button>
    </ion-nav-buttons>
    <ion-content>
...
    </ion-content>
</ion-view>
3

Thank you @eivanov. It was helpful. :slight_smile:
Before posting, I already made what you proposed but 4 eyes is always better as 2, because the key was very simple in fact. I must indeed call a tab of my view instead of the tab directly.
so ui-sref=“page02.party-tc” instead of ui-sref=“page02”

So for others people : i open tab content through abstract page, not through mainparty anymore.

A remark : your button with angular directive works good but normally (after ionic online help reading)

<ion-nav-back-button class="button icon ion-arrow-left-c">
</ion-nav-back-button>

and

<ion-nav-buttons side="left">
     <button class="button icon ion-arrow-left-c" ng-click="$ionicGoBack()"></button>
</ion-nav-buttons>

must be the same.

What is your point of view ?

Anyway, thank you again for your time.

Steven