我希望将模态对话框设置为Angular UI Router中的单独状态。但是,我有一个案例,模态框可以/应该出现在所有状态之上......我不确定这是否可行。
例如,假设我将/store
和/admin
作为2个单独的顶级状态。现在想象一下,我有一个不相关的模态对话框,比如一个联系表单(就像一个例子)应该放在每个对话框之上。
如果我将其建模为/contact
,则/store
或/admin
状态显然已被遗忘,因此模态背后的背景为空白。
解决方案可能是有两个子状态,如/store/contact
和/admin/contact
,这样可以保留模态对话框后面的内容...但是,这种方法不能缩放X数顶级州。
简而言之,我怎么能说/contact
是所有州的孩子,不管筑巢?这可能吗?或者我只是不必在这种情况下使用角度UI路由器?
答案 0 :(得分:0)
UI-Router
状态机用父子关系表示。所以答案是 - 每个孩子都可以拥有/完全一个父。这是事实。它可以被视为"有点不能正常回答" 。
但是,如果我们真的希望有多个子状态/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
作为子状态。将其移动到视图(哪些功能将支持模态)
以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"
...