Question

我希望将模态对话框设置为Angular UI Router中的单独状态。但是，我有一个案例，模态框可以/应该出现在所有状态之上......我不确定这是否可行。

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

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

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

简而言之，我怎么能说/contact是所有州的孩子，不管筑巢？这可能吗？或者我只是不必在这种情况下使用角度UI路由器？

Answer 1

UI-Router状态机用父子关系表示。所以答案是 - 每个孩子都可以拥有/完全一个父。这是事实。它可以被视为＆＃34;有点不能正常回答＆＃34; 。

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

它可以标记为开销，但状态只是配置。它不会对性能产生太大影响。视图和控制器无论如何都按状态实例化......无论其状态如何。

// 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);
    ...

我认为另一种方法是 NOT 使用Contact作为子状态。将其移动到视图（哪些功能将支持模态）

Multiple Named Views

以root状态定义一次 - 作为视图

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

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

现在，每个＆＃34;父母＆＃34;状态可以从上面获益，而不会影响url或name （不需要＆＃34; root.someParent＆＃34;如果使用parent设置）< / em>的

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

使用Angular UI路由器，如何使状态成为所有状态的子状态？

1 个答案:

Multiple Named Views