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>
terryoleary:
tab.profile
your ui-sref should be just “tab.profile” without “#/”.
Thanks I tried that but when you click the button it doesn’t go anywhere, would i be missing something else where?
terryoleary:
tabs.html
I need to see content of your tabs.html to tell you more
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>
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>
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
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!
ok will update my example with hyphen
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?
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
that way didn’t work. Do you need to do anything to the tab.html?
It depends. Please explain the journey proccess. How do you get to state/view where your link to profile is?
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
ok try my example from above but instead of ‘tab-more@tab’ do ‘tab-more’. Does it work?
Also
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>
terryoleary:
ui-sref=“tab.profile”
well your link should now point to ui-sref=“tab.more.profile”
with abstract:true the more page won’t load.
remove that and the more.html loads but the link does nothing if pressed
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
try adding abstract:true to .state(‘tab.more’
