Providing angular material $ mdDialog url in angular state ui-router

Question

I want to show the Angular Material dialog box on a specific url while keeping the previous route visited as a background state.

Therefore, the workflow will:

• A user visits a page with a URL business/6/contacts. (condition: business.contacts)
• The user visits the URL business/6/checkout. (state: business.checkout)

It should keep the contact page in the background and load the label on top of this URL.

However, for another workflow in which the user visits the url business/6/settings, he must save the settings page as a background and load the checkout modal if the user visits business/6/checkout.

Also click outside anywhere to reject the modal and load the previous page.

Answer 1

You must make these modal states as child states of contacts and settings pages. In this scenario, your url will be business / 6 / contacts / checkout and business / 6 / settings / verification respectively. You must have some identifier in your URL to separate the two cases. Otherwise, when you enter a page directly from a URL, you cannot distinguish between these two cases if you use the same URL.

Here is an example:

var checkoutStateObject = {
        url: '/checkout'..,
        controller:"CheckoutModalCtrl" // same controller for below state
      };

yourApp.state("business", {
        url: "/business/:businessId"...}) //parent state
.state('business.contacts', {
        url: '/contacts'..
      })
.state('business.settings', {
        url: '/settings'..
      })
.state('business.contacts.checkout', checkoutStateObject)
.state('business.settings.checkout', checkoutStateObject)