angularjs - Angular UI-Router 模式删除父状态

Question

我正在开发一个具有 ui-router 模块的 Angular 应用程序。
当进入路由器的某个状态时，我会显示一个模态对话框，然后替换我的父 View 。我想保留父 View 并将模态显示为覆盖。有没有办法用 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");
        });
    }
})

谢谢

Answer 1

我认为正确的解决方案是:

$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因为嵌套状态的默认行为是将它们加在一起... ^绕过这个。你还需要在状态加载样式这个东西，所以它是一个“模式”并且在其他内容之上。

然后在 clients.list里面声明您需要更新 /client-list.tpl.html有一个 ng-view这将在父 View 之上设置自己的样式。

如果需要，我可以创建一个 plunkr，但如果我这样做，我基本上会为你实现一切。