在Angular UI-Router状态中给Angular Material $mdDialog传递一个URL

Question

我希望在特定的URL上显示一个Angular Material对话框，同时保留之前访问的路由作为背景状态。

因此，工作流程将是：

1. 用户访问具有URL business/6/contacts 的页面。 （状态：business.contacts） 2. 用户访问URL business/6/checkout。 （状态：business.checkout）

它应该将联系人页面保留在后台，并在其上加载带有给定URL的结帐模态窗口。

但是，对于另一个工作流程，当用户访问URL business/6/settings时，它应该将设置页面保持为背景，并在用户访问business/6/checkout时加载结帐模态窗口。

同时，单击任何地方之外都应该关闭模态窗口并加载回先前的页面。

- Piyush Chauhan

Answer 1

你应该将这些模态状态作为联系人和设置页面的子状态。在这种情况下，你的 URL 将分别是 business/6/contacts/checkout 和 business/6/settings/checkout。你必须在 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)

- cubbuk

---

你可以使用onEnter代替controller。('statename', { url: '..', templateUrl: '...', onEnter: [ '$mdDialog', function($mdDialog){ $mdDialog.alert({ 在这里输入你的代码 }) } ] } - neftedollar

我认为使用控制器可以帮助减少代码的重复，您可以在不同的状态下重复使用同一个控制器等。 - cubbuk

我喜欢这个，但是有没有办法在“business.checkout”状态下实现它，否则如果有其他状态，如“business.inventory”，“business.canvas”或许多其他状态，我必须为每一个状态跟踪。@cubbuk - Piyush Chauhan

对于 onEnter，我们也必须进行复制，否则它不会在后台保留先前的状态。@neftedollar - Piyush Chauhan

@PiyushChauhan 您可以将状态对象设置为变量，并针对每个状态使用相同的对象。我使用了类似的方法编辑了答案。如果您坚持使用 business.checkout 的方式，您可以在业务状态中检查 URL 参数，并根据其打开您的模态框。但是在这种情况下，您必须将此 URL 参数添加到每个不同的状态中，以便显示此对话框。 - cubbuk