在 angular ui-router 状态中给 angular material $mdDialog 一个 url

Question

我想在特定 url 上显示 Angular Material 对话框，同时将之前访问过的路线保持为背景状态。

因此工作流程将是：

用户访问带有 url business/6/contacts 的页面。（状态：business.contacts）
用户访问url business/6/checkout。（状态：business.checkout）

它应该将联系人页面保留在后台，并使用给定的 url.

在其顶部加载结帐模式

然而，对于用户访问 url business/6/settings 的另一个工作流程，它应该将设置页面保留为背景，并在用户访问 business/6/checkout.

时加载结帐模式

此外，在外部任意位置单击应该会关闭模式并加载回上一页。

Answer 1

您应该将这些模态状态作为联系人和设置页面的子状态。在此场景中，您的 url 将分别为 business/6/contacts/checkout 和 business/6/settings/checkout。你必须在你的 url 中有一些标识符来区分这两种情况。否则当你直接从url进入页面时，如果你使用相同的url.

，你将无法区分这两种情况。

这是一个例子：

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)

在 angular ui-router 状态中给 angular material $mdDialog 一个 url

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

javascript

url-routing

angularjs

angular-ui-router

angular-material