CODEWITHSUNDEEP
angularjsionic-framework
Josh Burgess
Josh Burgess

Reputation: 23

Angularjs, Ionic Framework - Options for navigating back to a modal

I am working on a project where we have an array of items on a page. Each item on this page, when clicked on, opens a modal which presents the user with a button that leads to a separate controller and another view.

When the user hits the back button on the page that has been loaded, it takes the user to the array page. I require the pressing of the back button to lead to viewing the modal, and I have gone through a few options:

  1. Turning the loaded page into a modal that overlays the original modal, so when the user clicks the button, it will open this, leaving the original modal in place.

  2. Rewiring the back button to change state to use $state.go(). this will need to be in each controller.

  3. Tampering with $rootScope.viewHistory, the option that seems the hackiest. This will read the previous state and edit it directly to cause the back button to lead somewhere else.

  4. Have a back button function in the $rootScope which can be passed two parameters: state and stateParameters. this would check if anything has been passed to it and change state accordingly. If nothing is passed it would use the normal back button function.

Pros and cons

(1) The main issues with turning this page into a modal are that it will require duplicating the page, this is due to it needing to be within two controllers so that we will not lose the data on the item list page and it will need to be accessible from the menu from within its own controller. The reason this could be useful is the fact that another page will need to work in this way.

(2) The main issue with adapting the back button is that the back button is only located on one page at the moment, the menu, which is an abstract parent state to all of the other states. This could mean that we would need to pull the back button onto each page to change its functionality on a page by page basis. This could also mess up how the page slides in when changing state, as I am unaware of any way to call sliding direction from within a function.

(3) This would seem reasonably easy but I have no clue if this will work and it feels really hacky

(4) If we were to have a $rootScope function for the back button we would need to have it called first, at this point of time, one controller is called before any of the others, but this could all change once we integrate push notifications.

What would be considered the best solution to this? Should I rework in a master controller (is this possible?) which loads a $rootScope based back button? Is there a way to load a modal in a different controller whilst keeping the data in the original controller? What would be my best option?

Upvotes: 2

Views: 306

Answers (1)

lastcommit
lastcommit

Reputation: 106

First off, this is a clunky design pattern. If you trigger a modal, all UI transitions from then on should stay confined to the modal so that you don't confuse your user. Think of a modal as something that briefly drills into an action rather than a navigational element. If you need multiple pages of interaction for each array element, build them all inside of the modal. You should be able to pull this off in a custom directive.

If you absolutely need to use a modal as an intermediate to navigate elsewhere in your app, I would recommend caching the params that you need to trigger a modal (via local storage, session storage, cookie, etc.). When the user first triggers the modal, store the params. When you navigate to the parent controller, check for the existence of the params and if they are there, trigger the modal programatically. Just don't forget to wipe the params from storage as soon as the modal closes/the user navigates back from the parent page.

Upvotes: 2

Related Questions