角UI的路由器模式删除父状态 [英] Angular UI-Router modal removes parent state

问题描述

我的工作有UI的路由器模块的角度应用程序。
当进入路由器的某个状态，我展示一个模式对话框，然后代替我的父视图。我想保持父视图，并显示模式为叠加。有没有办法与UI的路由器呢？

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",
})

重要的事我做了 /添加通过增加一个 ^ 绝对的。大多数人会刚刚做 /列表/添加因为嵌套状态的默认行为是将它们加在一起的... ^ 绕过这一点。您还需要在状态负载风格这个东西所以它的一个模式，是对其他内容的顶部。

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-视图，将样式本身父视图的顶部。

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.

这篇关于角UI的路由器模式删除父状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！