Navigation for modals

ionic-v1
1

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!

2

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:

$scope.data = {
		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
  $scope.data.currentIndex = _.findIndex($scope.data.views, { name : viewName });

  var _modalView = $scope.data.views[$scope.data.currentIndex];

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

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

  // Navigate to the requested view
  $scope.modalSlider.slide($scope.data.currentIndex);
}

$scope.closeOrBack = function() {
    if ($scope.data.returnIndex < 0) {
        $scope.modal.hide();
    } else {
        $scope.go($scope.data.views[$scope.data.currentIndex].returnView);
    }
}

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>
    </ion-slide>

</ion-slide-box>

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.