Angularjs, IonicFramework - Options for going to modal
I am working on a project where we have an array of items on a page. Each element on this page, when clicked, opens a modal code that presents the user with a button that leads to a separate controller and a different view.
When the user clicks the back button on the loaded page, the user is taken to the array page. I need to press the Back button to bring up the view of the modal code, and I took advantage of several options:
-
Turning the loaded page into a modal that overlays the original modal code, so when the user clicks the button, it will open that, leaving the original modal in place.
-
Revert back button to change state to use $ state.go (). this should be in every controller.
-
Violation with $ rootScope.viewHistory is the option that seems to be the most hacky. This will read the previous state and edit it directly to trigger a return button elsewhere.
-
Have a back button function in $ rootScope that can be passed with two parameters: state and stateParameters. this will check if something was passed to it and change state accordingly. If nothing is transferred, it will use the normal Back button function.
Pros and cons
(1) The main problems with converting this page to a modal is that it will require duplication of the page, this is due to the fact that it must be in two controllers so that we do not lose data on the list of items page and it must be accessible from the menu from your own controller. The reason this might be useful is the fact that another page will need to work this way.
(2) The main problem with customizing the Back button is that the Back button is only on one page at a time, a menu that is the abstract parent state of all other states. This could mean that we need to drag the back button on each page to change its functionality page by page. It can also mess up how the page slides when the state changes, as I don't know how to cause the sliding direction inside the function.
(3) This may sound simple enough, but I don't know if this will work and it feels really hacked
(4) If we had a $ rootScope function for the back button, we would need to call it first, currently one controller is called before any of the others, but that might all change once we integrate push notifications.
What is considered the best solution for this? Should I rework the master controller (is this possible?) that loads the return button based on the $ rootScope? is there a way to load the modal in another controller while keeping the data in the original controller? What's my best option?
source to share
First of all, it's a clumsy design pattern. If you run a modal, all UI transitions should be limited to the modal so you don't confuse the user. Think of a modal as something that is briefly practiced in action, rather than a navigation element. If you need multiple interaction pages for each element of the array, create them all inside the modal. You should be able to do this in a custom directive.
If you absolutely need to use modal as an intermediate to navigate elsewhere in your application, then I would recommend caching the parameters required to run the modal (via local storage, session storage, cookie, etc.). When the user first runs the modal, save the options. When you go to the parent controller, check for the parameters and, if they are there, programmatically program the modality. Just remember to erase the options from storage as soon as the modal closes / the user navigates from the parent page.
source to share