使用 Angular UI Router，如何让一个状态成为所有状态的子状态？

Question

我想让模态对话框在 Angular UI Router 中成为一个单独的状态。但是，我有一种情况，模态框可以/应该出现在所有状态之上......我不确定这是否可能。

例如，假设我有 /store 和 /admin 作为 2 个独立的顶级状态。现在想象一下，我有一个不相关的模态对话框，比如应该放在每个表单之上的联系表单（仅作为示例）。

如果我将其建模为/contact，/store 或/admin 状态显然会被遗忘，因此模态背后的背景是空白的。

解决方案可能是有两个子状态，如/store/contact 和/admin/contact，这样可以保留模式对话框后面的内容...但是，这种方法不适用于 X 数量的顶级状态.

简而言之，我怎么能说/contact 是所有状态的孩子，无论嵌套如何？这可能吗？还是在这种情况下我根本不必使用 Angular UI 路由器？

Answer 1

UI-Router 状态机用 父子关系 表示。所以答案是 - 每个孩子都可以只有/恰好一个父母。这是事实。它可以被视为“一种不起作用的答案”。

但是，如果我们真的希望有很多子状态 /contact (where contact feature is moved to its own state)，我会不说重复定义是一个问题。

它可以被标记为开销，但状态只是一个配置。它不会对性能产生太大影响。 views 和 controllers 无论如何都是按状态实例化的......不管它的状态定义如何。

// declare once view
var contactState = {
  controller: ...
  template: ...
  ...
};

// reuse as need for some ...
stateNamesWithContact.forEach( function(stateName)
{
    // regiester state many times as "some.parnet.child.contact"
    $stateProvider
        .state(stateName + ".contact", contact);
    ...

我更喜欢的另一种方法是不使用Contact 作为子状态。将其移到视图中（哪些功能将支持模态）

Multiple Named Views

定义一次，处于根状态 - 作为视图

如果 Contact 视图/控制器是静态的，我们可以将它们挂钩到超级根状态：

.state("root", {
    views : {        
        "" : {
           template: "<ui-view />" // here will be injected all children
        }
        "contact@" : {
           ... //setting of the Contact view / controller
        }
    }
}

现在，每个“父”状态都可以从上述中受益，而不会影响url 或name （如果使用parent 设置，则不需要有“root.someParent”）

.state("someState", {
    parent: "root"
    ...