我正在开发一个具有 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");
});
}
})
Thanks
我认为正确的解决方案是这样的:
$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
它将在父视图之上设置自身的样式。
如果需要的话,我可以创建一个 plunkr,但如果我这样做了,我基本上就是在为你实现一切。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)