I'm kinda new to angularJs and Ionic. I have implemented striped tabs following the css documentation of ionic's website.
I would like when i click on a tab that the header doesn't slide (reload) with its content.
Basicaly i need to do something similar than the javascript documentation of ionic, here.
This is my search page :
<ion-view title="Friendlist">
<div class="tabs-striped tabs-top tabs-background-stable tabs-color-calm">
<div class="tabs tabs-icon-left">
<a class="tab-item" href="#">
<i class="icon ion-person"></i>
Followers
</a>
<a class="tab-item" href="#">
<i class="icon ion-star"></i>
Following
</a>
<a class="tab-item active" ui-sref="search">
<i class="icon ion-search"></i>
Search
</a>
</div>
</div>
<ion-content class="has-tabs-top" ng-controller="UserController">
<div class="list list-inset">
<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input type="text" placeholder="Search">
</label>
</div>
<div class="list">
<div ng-repeat="user in users.user">
<a class="item item-avatar" ui-sref="user({id:user.id})">
<!-- <img ng-src=""> -->
<h2>{{ user.firstname }} {{ user.lastname }}</h2>
</a>
</div>
</div>
</ion-content>
</ion-view>
I'm using 3 different routes that link to 3 different template and probably 3 different controllers.
.state('followers', {
url: '/followers',
templateUrl: 'templates/followers.html'
})
.state('following', {
url: '/following',
templateUrl: 'templates/following.html'
})
.state('search', {
url: '/search',
templateUrl: 'templates/search.html'
})
I'm not sure to do it the right way. I don't mind if the loading of the tab's section is not instant but at least i'd like to keep my striped tabs header static as if the page was not reloading or accessing a new page.
you have to change the routes, so that the parent is accessed by the child. Here the tabs are child of the Parent (friendlist). Friendlist should be present before the other routes. change your route to :
.state('friendlist', {
url: '/friendlist',
templateUrl: 'templates/friendlist.html',
controller:'FriendlistCtrl'
})
.state('friendlist.followers', {
url: '/followers',
templateUrl: 'templates/followers.html'
})
.state('friendlist.following', {
url: '/following',
templateUrl: 'templates/following.html'
})
.state('friendlist.search', {
url: '/search',
templateUrl: 'templates/search.html'
})
now try using FriendlistCtrl for the tab rather than using different different controller for every tab.
