我正在开发一个具有ui-router模块的角度应用程序.
当进入路由器的某个状态时,我会显示一个模态对话框,然后替换我的父视图.我想保留父视图并将模态显示为叠加.有没有办法用ui-router做到这一点？
当进入路由器的某个状态时,我会显示一个模态对话框,然后替换我的父视图.我想保留父视图并将模态显示为叠加.有没有办法用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");
- });
- }
- })
谢谢
我认为正确的解决方案是这样的：
- $stateProvider.state("clients.list",resolve: {
- clients: function (ClientService) {
- return ClientService.all();
- }
- }
- })
- .state("clients.list.add",{
- url: "^/add",})
重要的是我通过添加^来创建/添加绝对值.大多数人都会刚刚完成/ list / add,因为嵌套状态的默认行为是将它们加在一起…… ^绕过它.你还需要在状态加载样式这个东西,所以它是一个“模态”,并在其他内容之上.
然后在clients.list状态中,你需要更新/client-list.tpl.html以获得一个ng-view,它将在父视图之上设置自己的样式.
如果需要,我可以创建一个plunkr,但如果我这样做,我基本上是为你实现一切.
