我想让模式对话框在 Angular UI Router 中成为一个单独的状态。但是,我有一种情况,模式框可以/应该出现在所有状态的顶部......我不确定这是否可能。
例如,假设我有 /store
和 /admin
作为 2 个独立的顶级状态。现在假设我有一个不相关的模态对话框,例如应该位于每个对话框之上的联系表单(仅作为示例)。
如果我将其建模为 /contact
,/store
或 /admin
状态显然会被遗忘,因此模态背后的背景是空白。
解决方案可能是有两个子状态,如 /store/contact
和 /admin/contact
,这样可以保留模式对话框后面的内容。 . 然而,这种方法无法扩展到 X 数量的顶级状态。
简而言之,我怎么能说 /contact
是所有状态的 child ,而不管嵌套?这可能吗?还是在这种情况下我不必使用 Angular UI 路由器?
最佳答案
UI-Router
状态机用父子 关系表示。所以答案是 - 每个 child 只能/恰好有一个 parent 。这是事实。它可以被视为“某种无效的答案”。
但是,如果我们真的想要有很多子状态 /contact
(其中
contact 特性被移动到它自己的状态)
,我不会说重复定义是一个问题。
它可以被标记为开销,但状态只是一个配置。它不会对性能产生太大影响。 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
作为子状态。将其移动到 View 中(哪些功能将支持模式)
Multiple Named Views
在根状态下定义一次 - 作为 View
如果Contact View / Controller 是静态的,我们可以将它们挂接到超根状态:
.state("root", {
views : {
"" : {
template: "<ui-view />" // here will be injected all children
}
"contact@" : {
... //setting of the Contact view / controller
}
}
}
现在,每个“父”状态都可以从上述内容中获益,而不会影响 url
或 name
(如果parent
设置被使用)
.state("someState", {
parent: "root"
...
关于javascript - 使用 Angular UI Router,如何使一个状态成为所有状态的子状态?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28389380/