我想将模式对话框在Angular UI Router中设置为单独的状态。但是,我有一种情况,模态框可以/应该出现在所有状态的顶部……而且我不确定这是否可能。

因此,例如,假设我将/store/admin作为2个单独的顶级状态。现在,假设我有一个不相关的模式对话框,例如应该放在每个对话框上方的联系表单(仅作为示例)。

如果我将此模型建模为/contact,则显然会忘记/store/admin状态,因此模态后面的背景为空白。

解决方案可能是具有两个子状态,例如/store/contact/admin/contact,这会将内容保留在模态对话框的后面...但是,这种方法无法扩展X个顶级状态。

简而言之,我如何说/contact是所有状态的子级,而不管嵌套如何?这可能吗?还是在这种情况下我是否只需要不使用 Angular UI路由器?

最佳答案

UI-Router状态机用父子关系表示。因此,答案是-每个 child 可以有一个正好 parent 。这是事实。并且可以将其视为“无法正常工作的答案”。
但是,如果我们真的希望有许多子状态/contact (where 联系人 feature is moved to its own state),我会而不是说重复定义是一个问题。
可以将其标记为开销,但状态只是配置。它对性能的影响不大。无论如何, View 和 Controller 都是按状态实例化的,而不管其状态def如何。

// 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作为子状态。将其移到 View 中(哪些功能将支持模式)
Multiple Named Views
在根状态下定义一次-作为 View
如果联系人 View / Controller 是静态的,我们可以将它们挂接到 super 根状态:
.state("root", {
    views : {
        "" : {
           template: "<ui-view />" // here will be injected all children
        }
        "contact@" : {
           ... //setting of the Contact view / controller
        }
    }
}
现在,每个“父”状态都可以从上面受益,而不会影响urlname(如果使用parent设置,则无需具有“root.someParent”)
.state("someState", {
    parent: "root"
    ...

关于javascript - 使用Angular UI Router,如何使状态成为所有状态的子级?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/28389380/

10-12 07:39
查看更多