Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angularjs + Ionic Framework: How to create a new route that shows the ion-tabs navigation but without defining a tab for itself?

Long title but here is a better explanation.

I have a template html file called "Login". I define a route in app.js like so

.state('login', {
  url: '/login',
  templateUrl: 'templates/login.html',
  controller: 'createAccountCtrl'
})

By using ui-sref="login" I can link to this template from anywhere which is perfect for my needs.

However the main app uses an abstract route "tab" to load the tabs template which contains the main navigation.

.state('tab.about', {
  url: '/about',
  views: {
    'about-tab': {
       templateUrl: 'templates/about.html',
       controller: 'aboutCtrl'
     }
   }
})

  <ion-tabs tabs-style="tabs-icon-top" tabs-type="tabs-default">

    <!-- Home Tab -->
    <ion-tab title="Home" icon="icon ion-home" href="#/tab/home">
      <ion-nav-view name="home-tab"></ion-nav-view>
    </ion-tab>

    <!-- Products Tab -->
    <ion-tab title="Earn Points" icon="icon ion-ios7-plus-outline" href="#/tab/retail-store">
      <ion-nav-view name="retail-store-tab"></ion-nav-view>
    </ion-tab>

  </ion-tabs>

My problem is this. I want the Login page to have the main app's navigation like every other page has. That way a user who makes it to the login page, if they don't to login can still navigate off to the home or about page. But, I do not want a navigation tab/icon of its own to show.

Is is possible to just add the tabs html directly to the login.html template file or possibly hide the login icon/tab. I am open to suggestions and help. Thank you!

like image 417
tbondt Avatar asked Mar 19 '14 18:03

tbondt


1 Answers

The tabs are meant to have their own tab icon. So you can't put the login page inside the tabs abstract view without creating a tab icon for it.

Instead of putting the login page under the tab abstract view, you should just put a separate tabbed navigation for the login page.

Load the following view into your index page.

<ion-view title="'Login'">

<ion-content has-header="true" has-footer="true" padding="true">

Login page content goes here 

</ion-content>

<div class="tabs tabs-icon-left">
  <a class="tab-item" href="#/tab/home">
   Home
  </a>
  <a class="tab-item" href="#/tab/about">
    About
  </a>
</div>

</ion-view>
like image 105
Varun Nath Avatar answered Sep 20 '22 05:09

Varun Nath