CODEWITHSUNDEEP
javascriptangularjsangular-ui-routerurl-routingangular-material
Piyush Chauhan
Piyush Chauhan

Reputation: 1543

Giving angular material $mdDialog a url in angular ui-router state

I want to show an Angular Material Dialog on a particular url while keeping the previous visited route as a background state.

Hence the workflow will be:

  1. User visits a page with url business/6/contacts. (state: business.contacts)
  2. User visits a url business/6/checkout. (state: business.checkout)

It should keep the contacts page in the background and load the checkout modal on top of it with the given url.

However for another workflow where user visits url business/6/settings, it should keep the settings page as background and load the checkout modal if user visits business/6/checkout.

Also clicking outside anywhere should dismiss the modal and load back previous page.

Contacts Page

Settings Page

Checkout Modal

Upvotes: 4

Views: 4324

Answers (1)

cubbuk
cubbuk

Reputation: 7920

You should make these modal states as the child states of contacts and settings pages. In this sceneario your url will be business/6/contacts/checkout and business/6/settings/checkout respectively. You have to have some identifier in your url to seperate these two cases. Otherwise when you enter the page directly from url you can not distinguish 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)

Upvotes: 2

Related Questions