Angular UI-Router 模式删除父状态 [英] Angular UI-Router modal removes parent state
问题描述
我正在开发具有 ui-router 模块的 angular 应用程序.当进入路由器的某个状态时,我会显示一个模式对话框,然后它会替换我的父视图.我想保留父视图并将模态显示为叠加层.有没有办法用 ui-router 做到这一点?
I'm working on an angular app that has ui-router module. When entering a certain state of the router, I show a modal dialog, which then replaces my parent view. I would like to keep the parent view and show the modal as overlay. Is there a way to do it with ui-router?
举个例子:
$stateProvider.state("clients.list", {
url: "/list",
templateUrl: "app/client/templates/client-list.tpl.html",
controller: moduleNamespace.clientListController,
resolve: {
clients: function (ClientService) {
return ClientService.all();
}
}
})
// This will replace "clients.list", and show the modal
// I want to just overlay the modal on top of "clients.list"
.state("clients.add", {
url: "/add",
onEnter: function ($stateParams, $rootScope, $state, ngDialog) {
ngDialog.open({
controller: moduleNamespace.clientAddController,
template: "app/client/templates/client-add.tpl.html"
});
$rootScope.$on("ngDialog.closed", function (e, $dialog)
if ($state.current.name !== "clients.list") $state.transitionTo("clients.list");
});
}
})
谢谢
推荐答案
我认为正确的解决方案应该是:
I think the proper solution would be something like:
$stateProvider.state("clients.list", {
url: "/list",
templateUrl: "app/client/templates/client-list.tpl.html",
controller: moduleNamespace.clientListController,
resolve: {
clients: function (ClientService) {
return ClientService.all();
}
}
})
.state("clients.list.add", {
url: "^/add",
})
重要的是我通过添加 ^
使 /add
成为绝对的.大多数人会做 /list/add
因为嵌套状态的默认行为是将它们添加在一起...... ^
绕过了这一点.您还需要在状态加载样式这个东西,所以它是一个模态"并且在其他内容之上.
Important things are I made /add
absolute by adding a ^
. Most people would have just done /list/add
because the default behavior of nested state is to add them together...the ^
bypasses this. You also would need to on state load style this thing so its a "modal" and is on top of other content.
然后在 clients.list
状态中,您需要更新 /client-list.tpl.html
以获得 ng-view
> 这将在父视图的顶部设置自己的样式.
And then inside of clients.list
state you would need to update /client-list.tpl.html
to have an ng-view
that would style itself on top of the parent view.
如果需要,我可以创建一个 plunkr,但如果我这样做,我基本上是在为您实现一切.
I can create a plunkr if need be, but if I do that I am basically implementing everything for you.
这篇关于Angular UI-Router 模式删除父状态的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!