I've created a plunker showing my scenario. Please take a look.
The issue is that when I click search input I get redirected to offers tab. This shouldn't happen. When I click search input in home tab, search should be shown inside home tab and not offers tab.
If I click search input in offers tab, search should be shown inside offers tab and not home tab.
Navigation is therefore messed up in my example.
Tabs
<ion-tabs class="tabs-icon-top tabs-color-active-positive">
<ion-tab title="Home" icon-off="ion-ios-home-outline" icon-on="ion-ios-home" ui-sref="app.home">
<ion-nav-view name="tab-home"></ion-nav-view>
</ion-tab>
<ion-tab title="Promoções" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" ui-sref="app.offers">
<ion-nav-view name="tab-offers"></ion-nav-view>
</ion-tab>
</ion-tabs>
States
$stateProvider.state('app', {
abstract: true,
templateUrl: 'main.html',
controller: function(){}
});
$stateProvider
.state('app.search', {
url: '/search',
views: {
'tab-home': {
templateUrl: 'search.html',
controller: function($scope, $state){
$scope.current = $state.current;
$scope.$on('$stateChangeSuccess', function(event, toState){
$scope.current = toState;
});
}
},
'tab-offers': {
templateUrl: 'search.html',
controller: function($scope, $state){
$scope.current = $state.current;
$scope.$on('$stateChangeSuccess', function(event, toState){
$scope.current = toState;
});
}
}
}
});
$stateProvider
.state('app.offers', {
url: '/promos',
views: {
'tab-offers': {
templateUrl: 'offers.html',
controller: function($scope, $state){
$scope.current = $state.current;
$scope.$on('$stateChangeSuccess', function(event, toState){
$scope.current = toState;
});
}
}
}
});
$stateProvider
.state('app.home', {
url: '/home',
views: {
'tab-home': {
templateUrl: 'home.html',
controller: function($scope, $state){
$scope.current = $state.current;
$scope.$on('$stateChangeSuccess', function(event, toState){
$scope.current = toState;
});
}
}
}
});
My goal is:
How can I accomplish this?