Navigation for modals


Hi all

I’m in desperate need of a solution for this issue. I need to create a modal where you can navigate to other pages from that modal. Also keeping the state of the previous page. Apparently I thought i could use angular routing for this, but this does not seems to be working for modals.

Does anyone has a solution for this one? I can’t seem to find one…

Thanks in advance!


I’ve drafted up a solution of my own and i’m happy to share it with the community. I don’t know if this is the best approach, but it worked for me.

First I’ve created an object variable that holds all my views:

$ = {
		returnIndex : -1,
		currentIndex: 0,
		views : [{
    				'name': 'Overview',
                                    'title': 'Overview title',
    				'templateUrl': '<URL goes here>',
    				'returnView': 'none',
    				'viewable': true
				}, {
					'name': 'firstOption',
					'title': 'First Option',
					'templateUrl': '<URL goes here>',
					'returnView': 'Overview',
				'viewable': true
			}, , {
					'name': 'secondOption',
					'title': 'Second Option',
					'templateUrl': '<URL goes here>',
					'returnView': 'Overview',
				'viewable': true

Secondly i’ve made 2 functions. One for navigating to different views and another one for closing or going back to a previous view:

$scope.go = function(viewName) {
  // Find the index of the given view
  $ = _.findIndex($, { name : viewName });

  var _modalView = $[$];

  // Get the return view index and set it in the $scope data return index
  $ = _.findIndex($, { name : _modalView.returnView });

  // Determine modal title and set the modalTitle variable
  $scope.modalTitle = _modalView.title;

  // Navigate to the requested view

$scope.closeOrBack = function() {
    if ($ < 0) {
    } else {

Last up is the page that will hold the IONIC modal slider:

<ion-slide-box show-pager="false" delegate-handle="modalSlider">

    <ion-slide ng-repeat="view in data.views | filter: { viewable : true }">
         <div ng-include="view.templateUrl"></div>


I hope this is a clear snippet for people who want to implement this also. Or any improvements are welcome.

*Kudos to the guy somewhere on the net that gave me the idea of doing it this way.

How to have mutliple html files in ion-slide-box? Want implement Carousal functionality