How to load a state content in a tab nav view from modal?

ionic-v1
1

I have 4 tabs, each with it’s own content. I open a modal. I would like to click a button in the modal and route the response in one of the 4 tabs. I am unable to do that. Any suggestions?

To be clear, I can open the modal window just fine. No issues there. I want to click a button inside the modal and route the response to a navigation view for one of the tabs for e.g. tab-4 nav view.

Here is my tab code.

<ion-tabs class="tabs-icon-top tabs-color-active-assertive">
 <ion-tab title="Tab1" href="#/app/tab1">
    <ion-nav-view name="tab-1"></ion-nav-view>
</ion-tab>
<ion-tab title="Tab2" href="#/app/tab2">
   <ion-nav-view name="tab-2"></ion-nav-view>
</ion-tab> 
<ion-tab title="Tab3" href="#/app/tab3">
    <ion-nav-view name="tab-3"></ion-nav-view>
</ion-tab>
<ion-tab title="Tab4" href="#/app/tab4">
    <ion-nav-view name="tab-4"></ion-nav-view>
</ion-tab>

Here is my routes

	.config(function($stateProvider, $urlRouterProvider) {
	  $stateProvider
	  .state('app', {
		url: '/app',
		abstract: true,
		templateUrl: 'views/home.html',
		controller: 'AppCtrl'
	  })
	  .state('app.tab1', {
		  url: '/tab1',
		  views: {
			'tab-1': {
			  templateUrl: 'views/tab1.html',
			  controller: 'Tab1Ctrl'
			}
		  }
		})
	  .state('app.tab2', {
		url: '/tab2',
		views: {
		  'tab-2': {
			templateUrl: 'views/tab2.html',
			controller: 'Tab2Ctrl'
		  }
		}
	  }) 
	  .state('app.tab3', {
		  url: '/tab3',
		  views: {
			'tab-3': {
			  templateUrl: 'views/tab3.html',
			  controller: 'Tab3Ctrl'
			}
		  }
		})
           .state('app.tab3.modalcontent', {
		  url: '/modalcontent',
		  views: {
			'tab-3': {
			  templateUrl: 'views/modalcontent.html',
			  controller: 'Tab3Ctrl'
			}
		  }
		})
	  .state('app.tab4', {
			url: '/tab4',
			views: {
			  'tab-4': {
				templateUrl: 'views/tab4.html',
				controller: 'Tab4Ctrl'
			  }
			}
		  }));

When click a button in the modal I use $state

$state.go('app.tab3.modalcontent');

I want to show the state ‘app.tab3.modalcontent’ in tab-3 view but from modal. Currently it’s not working and it doesn’t throw any error either. $statechangeSuccess shows that ‘app.tab3.modalcontent’ state was successfully loaded, but views/modalcontent.html is not shown in ‘tab-3’ nav view. I would expect the modalcontent.html load in tab-3 nav view, but nothing happens.I still see tab3.html loaded. What should I do?

2

Hi,
Could you please try this…
Use the $ionicModal , and also don’t forget to inject $ionicModal in your controller…
$ionicModal.fromTemplateUrl(‘views/modalcontent.html’’, {
scope: $scope
}).then(function (modal) {
$scope.modal = modal;
});
// Triggered in the product modal to close it
$scope.closeModal = function () {
$scope.modal.hide();
};

I hope this will help you …
Thanks…

3

Thanks for your reply, but what you are suggesting is for opening a modal. I have no issues opening the modal. What I want to do is click on a button INSIDE a modal view and route the response in one of the tabs.

I have modified my question to make it more clear.

4

You should use $ionicTabsDelegate and its method select

5

Thanks. I looked at $ionicTabsDelegate, but I am not sure how I would use it to display a particular state. I want to show the state ‘app.tab3.modalcontent’ in tab-3 view but from modal. Currently it’s not working and it doesn’t throw any error either. $statechangeSuccess shows that ‘app.tab3.modalcontent’ state was successfully loaded, but views/modalcontent.html is not shown in ‘tab-3’ view.

Also just to be clear, if I modify my state from

.state('app.tab3.modalcontent', {
	  url: '/modalcontent',
	  views: {
		'tab-3': {
		  templateUrl: 'views/modalcontent.html',
		  controller: 'Tab3Ctrl'
		}
	  }
	})

to

.state('app.modalcontent', {
	  url: '/modalcontent',
	  views: {
		'tab-3': {
		  templateUrl: 'views/modalcontent.html',
		  controller: 'Tab3Ctrl'
		}
	  }
	})

Then, views/modalcontent.html is visible in tab-3 nav-view. But in that case, I am not able to navigate back to views/tab3.html which was the original content for ‘tab-3’ nav-view.

6

Can u create the simple plnkr?

7

Yea sure. Here’s is the plnkr

8

I got the same issue. Have you found any solution or workaround ? I currently use directive for each tab view to separate template and code, but have the feel that this is not the right way…