我想将模式对话框在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
}
}
}
现在,每个“父”状态都可以从上面受益,而不会影响url
或name
(如果使用parent
设置,则无需具有“root.someParent”).state("someState", {
parent: "root"
...
关于javascript - 使用Angular UI Router,如何使状态成为所有状态的子级?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/28389380/