# Ui-router, working with abstract tabs and button

**URL:** <https://forum.ionicframework.com/t/ui-router-working-with-abstract-tabs-and-button/19267>\
**Category:** ionic-v1\
**Created:** [March 17, 2015, 7:48pm UTC](https://forum.ionicframework.com/t/ui-router-working-with-abstract-tabs-and-button/19267 "2015-03-17T19:48:34Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![terryoleary](https://avatars.discourse-cdn.com/v4/letter/t/ecc23a/32.png) [@terryoleary](https://forum.ionicframework.com/u/terryoleary)\
**Post date:** [March 17, 2015, 7:48pm UTC](https://forum.ionicframework.com/t/ui-router-working-with-abstract-tabs-and-button/19267/1 "2015-03-17T19:48:34Z")

</div>

Hi all

I’ve got my self in a bit of a tangle with ui-routing. I’m making an app that displays a login screen, once you login in the router passes to a tab view that is abstract with 4 views. Within the last view I have a list, each item is a button that should allow the user to press on it to load a certain view with further options on but I’m just not able to get the routing correct.

Here is a snippet from my app.js, So I want to click on the profile button on the more page and get the profile.html page, think i’m missing something obvious

```
.state('tab', {
  url: "/tab",
  abstract: true,
  templateUrl: "templates/tabs.html"
  })
  
  .state('tab.more', {
    url: '/more',
    views: {
      'tab-more': {
        templateUrl: 'templates/tab-more.html',
        controller: 'moreCtrl'
      }
    }
  })

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

```

on my more.html the button is linking like this, i’ve also tried just ui-sref=“tab.profile” and href=“tab/profile”

```
<ion-content has-header="true" padding="true" class="viewer-panel">

            <div class="list">
                <div class="item item-divider">
                Profile
              </div>
                  <a class="item item-icon-left" ui-sref="#/tab.profile">
                    <i class="icon ion-person"></i>
                    View profile
                  </a>
```

---

<div class="post-metadata">

**Author:** ![yurinondual](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/yurinondual/32/92490_2.png) [@yurinondual](https://forum.ionicframework.com/u/yurinondual)\
**Post date:** [March 17, 2015, 8:13pm UTC](https://forum.ionicframework.com/t/ui-router-working-with-abstract-tabs-and-button/19267/2 "2015-03-17T20:13:18Z")

</div>

> [@terryoleary](#):
>
> tab.profile

your ui-sref should be just “tab.profile” without “#/”.

---

<div class="post-metadata">

**Author:** ![terryoleary](https://avatars.discourse-cdn.com/v4/letter/t/ecc23a/32.png) [@terryoleary](https://forum.ionicframework.com/u/terryoleary)\
**Post date:** [March 17, 2015, 8:16pm UTC](https://forum.ionicframework.com/t/ui-router-working-with-abstract-tabs-and-button/19267/3 "2015-03-17T20:16:36Z")

</div>

Thanks I tried that but when you click the button it doesn’t go anywhere, would i be missing something else where?

---

<div class="post-metadata">

**Author:** ![yurinondual](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/yurinondual/32/92490_2.png) [@yurinondual](https://forum.ionicframework.com/u/yurinondual)\
**Post date:** [March 17, 2015, 8:17pm UTC](https://forum.ionicframework.com/t/ui-router-working-with-abstract-tabs-and-button/19267/4 "2015-03-17T20:17:32Z")

</div>

> [@terryoleary](#):
>
> tabs.html

I need to see content of your tabs.html to tell you more

---

<div class="post-metadata">

**Author:** ![terryoleary](https://avatars.discourse-cdn.com/v4/letter/t/ecc23a/32.png) [@terryoleary](https://forum.ionicframework.com/u/terryoleary)\
**Post date:** [March 17, 2015, 8:36pm UTC](https://forum.ionicframework.com/t/ui-router-working-with-abstract-tabs-and-button/19267/5 "2015-03-17T20:36:08Z")

</div>

As requested

```
<ion-tabs class="tabs-dark" >
    <ion-tab icon="ion-flash" ui-sref="newsfeed">
      <ion-nav-view name="tab-newsfeed"></ion-nav-view>
    </ion-tab>
    <ion-tab icon="ion-location" ui-sref="tab.location">
      <ion-nav-view name="tab-location"></ion-nav-view>
    </ion-tab>
    <ion-tab icon="ion-images" ui-sref="tab.icebreaker">
      <ion-nav-view name="tab-icebreaker"></ion-nav-view>
    </ion-tab>
    <ion-tab icon="ion-speakerphone" ui-sref="tab.notifications">
      <ion-nav-view name="tab-notifications"></ion-nav-view>
    </ion-tab>
    <ion-tab icon="ion-navicon-round" ui-sref="tab.more">
      <ion-nav-view name="tab-more"></ion-nav-view>
    </ion-tab>
  </ion-tabs>
```

---

<div class="post-metadata">

**Author:** ![yurinondual](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/yurinondual/32/92490_2.png) [@yurinondual](https://forum.ionicframework.com/u/yurinondual)\
**Post date:** [March 17, 2015, 8:41pm UTC](https://forum.ionicframework.com/t/ui-router-working-with-abstract-tabs-and-button/19267/6 "2015-03-17T20:41:48Z")

</div>

> [@terryoleary](#):
>
> tab-profile

Well here you go. You need to have a view availabel with a name “tab-profile” as stated in your config. If you want your tabs to be visible when this view is active, but don’t want extra tab, you can either render it inside one of the existing tab views or hidden tab.

Hidden tab solution:

```
<ion-tab hidden="true">
  <ion-nav-view name="tab-profile"></ion-nav-view>
</ion-tab>

```

---

<div class="post-metadata">

**Author:** ![yurinondual](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/yurinondual/32/92490_2.png) [@yurinondual](https://forum.ionicframework.com/u/yurinondual)\
**Post date:** [March 17, 2015, 8:46pm UTC](https://forum.ionicframework.com/t/ui-router-working-with-abstract-tabs-and-button/19267/7 "2015-03-17T20:46:17Z")

</div>

Another option is to have profile as nested state of more. So it would be tab.more.profile and view would be tab-more or tab-more@tab

---

<div class="post-metadata">

**Author:** ![terryoleary](https://avatars.discourse-cdn.com/v4/letter/t/ecc23a/32.png) [@terryoleary](https://forum.ionicframework.com/u/terryoleary)\
**Post date:** [March 17, 2015, 8:46pm UTC](https://forum.ionicframework.com/t/ui-router-working-with-abstract-tabs-and-button/19267/8 "2015-03-17T20:46:23Z")

</div>

> [@yurinondual](#):
>
> \<ion-tab hidden=“true”\>  
> \<ion-nav-view name=“tab.profile”\>\</ion-nav-view\>  
> \</ion-tab\>

As yes excellent, I was playing round with that but couldn’t get it in my head.

If anyone else reviews this the name=“tab.profile” should be name=“tab-profile” as per my app.js

Thank you yurinondual you saved some of my hair!

---

<div class="post-metadata">

**Author:** ![yurinondual](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/yurinondual/32/92490_2.png) [@yurinondual](https://forum.ionicframework.com/u/yurinondual)\
**Post date:** [March 17, 2015, 8:46pm UTC](https://forum.ionicframework.com/t/ui-router-working-with-abstract-tabs-and-button/19267/9 "2015-03-17T20:46:57Z")

</div>

ok will update my example with hyphen

---

<div class="post-metadata">

**Author:** ![terryoleary](https://avatars.discourse-cdn.com/v4/letter/t/ecc23a/32.png) [@terryoleary](https://forum.ionicframework.com/u/terryoleary)\
**Post date:** [March 17, 2015, 8:48pm UTC](https://forum.ionicframework.com/t/ui-router-working-with-abstract-tabs-and-button/19267/10 "2015-03-17T20:48:10Z")

</div>

where do you put the view for this way? I’d like a back button to appear on the profile page you see

does the view go in more.html?

---

<div class="post-metadata">

**Author:** ![yurinondual](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/yurinondual/32/92490_2.png) [@yurinondual](https://forum.ionicframework.com/u/yurinondual)\
**Post date:** [March 17, 2015, 8:49pm UTC](https://forum.ionicframework.com/t/ui-router-working-with-abstract-tabs-and-button/19267/11 "2015-03-17T20:49:26Z")

</div>

It would be this:

```
.state('tab.more.profile', {
url: '/profile',
views: {
  'tab-more@tab': {
    templateUrl: 'templates/profile.html',
    controller: 'profileCtrl'
  }
}

```

})

and you don’t need hidden tab this way

---

<div class="post-metadata">

**Author:** ![terryoleary](https://avatars.discourse-cdn.com/v4/letter/t/ecc23a/32.png) [@terryoleary](https://forum.ionicframework.com/u/terryoleary)\
**Post date:** [March 17, 2015, 8:51pm UTC](https://forum.ionicframework.com/t/ui-router-working-with-abstract-tabs-and-button/19267/12 "2015-03-17T20:51:51Z")

</div>

that way didn’t work. Do you need to do anything to the tab.html?

---

<div class="post-metadata">

**Author:** ![yurinondual](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/yurinondual/32/92490_2.png) [@yurinondual](https://forum.ionicframework.com/u/yurinondual)\
**Post date:** [March 17, 2015, 8:53pm UTC](https://forum.ionicframework.com/t/ui-router-working-with-abstract-tabs-and-button/19267/13 "2015-03-17T20:53:05Z")

</div>

It depends. Please explain the journey proccess. How do you get to state/view where your link to profile is?

---

<div class="post-metadata">

**Author:** ![terryoleary](https://avatars.discourse-cdn.com/v4/letter/t/ecc23a/32.png) [@terryoleary](https://forum.ionicframework.com/u/terryoleary)\
**Post date:** [March 17, 2015, 8:57pm UTC](https://forum.ionicframework.com/t/ui-router-working-with-abstract-tabs-and-button/19267/14 "2015-03-17T20:57:54Z")

</div>

The user clicks the more tab (in tab.html) and this displays the more.html, inside the more.html is the link which I want the user to click on to go to the profile page, with the option to go back to the more.html with a back button?

or is there a better way?

I’d really like the profile.html to slide into the view taken by the more.html but with the tabs still showing

---

<div class="post-metadata">

**Author:** ![yurinondual](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/yurinondual/32/92490_2.png) [@yurinondual](https://forum.ionicframework.com/u/yurinondual)\
**Post date:** [March 17, 2015, 8:59pm UTC](https://forum.ionicframework.com/t/ui-router-working-with-abstract-tabs-and-button/19267/15 "2015-03-17T20:59:20Z")

</div>

ok try my example from above but instead of ‘tab-more@tab’ do ‘tab-more’. Does it work?

---

<div class="post-metadata">

**Author:** ![yurinondual](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/yurinondual/32/92490_2.png) [@yurinondual](https://forum.ionicframework.com/u/yurinondual)\
**Post date:** [March 17, 2015, 9:01pm UTC](https://forum.ionicframework.com/t/ui-router-working-with-abstract-tabs-and-button/19267/16 "2015-03-17T21:01:58Z")

</div>

Also 😄 try adding abstract:true to .state(‘tab.more’

---

<div class="post-metadata">

**Author:** ![terryoleary](https://avatars.discourse-cdn.com/v4/letter/t/ecc23a/32.png) [@terryoleary](https://forum.ionicframework.com/u/terryoleary)\
**Post date:** [March 17, 2015, 9:04pm UTC](https://forum.ionicframework.com/t/ui-router-working-with-abstract-tabs-and-button/19267/17 "2015-03-17T21:04:34Z")

</div>

didn’t like that, it reverted back to the login screen, the default view. Here is the contents of more.html

```
   <ion-view title="More" class="bubble-background">  
  <ion-nav-bar animation="nav-title-slide-ios7"
                 type="bar-positive"
                 back-button-type="button-icon"
                 back-button-icon="ion-ios7-arrow-back"
                 class="bar-dark">
    </ion-nav-bar>

 

        <ion-content has-header="true" padding="true" class="viewer-panel">

            <div class="list">
                <div class="item item-divider">
                Profile
              </div>
                  <a class="item item-icon-left" ui-sref="tab.profile">
                    <i class="icon ion-person"></i>
                    View profile
                  </a>

                  <a class="item item-icon-left" href="#/tab/tab-edit_profile">
                    <i class="icon ion-edit"></i>
                    Edit profile
                  </a>
                  <a class="item item-icon-left" href="#/more/tab-albums">
                    <i class="icon ion-image"></i>
                    Albums
                  </a>
            </div>
          <div class="list">
                <div class="item item-divider">
                Messages
              </div>
                  <a class="item item-icon-left" href="#/more/tab-message_compose">
                    <i class="icon ion-email"></i>
                    Compose Message
                  </a>

                  <a class="item item-icon-left" href="#/more/tab-inbox">
                    <i class="icon ion-chatbubble-working"></i>
                    Inbox
                    
                  </a>
            </div>
          <div class="list">
                <div class="item item-divider">
                Groups
              </div>
                  <a class="item item-icon-left" href="#/more/tab-groups">
                    <i class="icon ion-person-stalker"></i>
                    View groups
                  </a>
            </div>
            
            <div class="list">
                <div class="item item-divider">
                Settings
              </div>
                  <a class="item item-icon-left" href="#/tab/tab-settings">
                    <i class="icon ion-settings"></i>
                    User settings
                  </a>

                  <a class="item item-icon-left" href="#">
                   <i class="icon ion-log-out"></i>
                   Logout
                  </a>
            </div>
        </ion-content>

</ion-view>
```

---

<div class="post-metadata">

**Author:** ![yurinondual](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/yurinondual/32/92490_2.png) [@yurinondual](https://forum.ionicframework.com/u/yurinondual)\
**Post date:** [March 17, 2015, 9:07pm UTC](https://forum.ionicframework.com/t/ui-router-working-with-abstract-tabs-and-button/19267/18 "2015-03-17T21:07:34Z")

</div>

> [@terryoleary](#):
>
> ui-sref=“tab.profile”

well your link should now point to ui-sref=“tab.more.profile”

---

<div class="post-metadata">

**Author:** ![terryoleary](https://avatars.discourse-cdn.com/v4/letter/t/ecc23a/32.png) [@terryoleary](https://forum.ionicframework.com/u/terryoleary)\
**Post date:** [March 17, 2015, 9:10pm UTC](https://forum.ionicframework.com/t/ui-router-working-with-abstract-tabs-and-button/19267/19 "2015-03-17T21:10:49Z")

</div>

with abstract:true the more page won’t load.

remove that and the more.html loads but the link does nothing if pressed 😒

---

<div class="post-metadata">

**Author:** ![yurinondual](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/yurinondual/32/92490_2.png) [@yurinondual](https://forum.ionicframework.com/u/yurinondual)\
**Post date:** [March 17, 2015, 9:12pm UTC](https://forum.ionicframework.com/t/ui-router-working-with-abstract-tabs-and-button/19267/20 "2015-03-17T21:12:20Z")

</div>

yea sorry, abstract wouldn’t work here. So if you remove it and change view to ‘tab-more@tab’. It is definatly possible, I just had a long working day and my head is tired now 😃

[Next page](https://forum.ionicframework.com/t/ui-router-working-with-abstract-tabs-and-button/19267.md?page=2)