我正在尝试使用 Angular 的 ui-router 打开模式对话框，如here所述.
目标是让对话框可以在任何地方访问，不一定需要 URL，但如果我可以链接到打开对话框的页面，那就太好了。
这是损坏的示例:
http://plnkr.co/edit/BLkYME98e3ciK9PQjTh5?p=preview
单击“菜单”应从任一页面打开对话框。
路由逻辑:
app.config(function($stateProvider,$locationProvider, $urlRouterProvider, modalStateProvider) {
$urlRouterProvider.otherwise("/");
$locationProvider.html5Mode(true);
$stateProvider
.state("app", {
url: "",
abstarct: true,
views: {
"" : {
templateUrl: "main.html",
},
"header@app": {
templateUrl: "header.html"
},
"footer@app":{
templateUrl: "footer.html"
}
}
})
.state("app.home", {
url: "/",
templateUrl: "home.html",
})
.state("app.content", {
url: "/content",
templateUrl: "content1.html",
});
modalStateProvider.state("app.home.menu", {
template: "I am a Dialog!",
controller: function ($scope) {
$scope.dismiss = function () {
$scope.$dismiss();
};
}
});
});
它不应该是“app.home”的子项，因为我希望可以从任何地方访问它。我怎样才能实现这个目标？
最佳答案
您可以使用 UI-Router Extras“粘性状态”来做到这一点。
更新后的信息:http://plnkr.co/edit/GYMjzmBALlQNFWoldmxa?p=preview
这是 UI-Router Extras 模式演示:http://christopherthielen.github.io/ui-router-extras/example/stickymodal/#/
<小时/>为了更新你的插件，我添加了 UI-Router Extras:
<script src="https://rawgit.com/christopherthielen/ui-router-extras/0.0.10/release/ct-ui-router-extras.js"></script>
var app = angular.module('plunker', ['ui.router', 'ct.ui.router.extras', 'ui.bootstrap']);
我为应用程序添加了一个命名的 ui-view，并为模式添加了一个命名的 ui-view
<body>
<div ui-view="app"></div>
<div ui-view="modal"></div>
</body>
然后，我将您的应用状态标记为“粘性”，并将您的模态状态设为顶级状态。其效果是，您可以从任何 app.* 状态导航到模态状态...而不是退出该状态，它只会“停用”它，并且保留在 DOM 中。
$stateProvider
.state("app", {
url: "",
abstract: true,
sticky: true,
modalStateProvider.state("menu", {
更新了对评论中问题的回复:
quick question: if I give the "menu" state a URL (/menu) and the user goes to that URL (website.com/menu) is there a way to set a "default" sticky for the app view? (sort of default parent of the modals)
您可以使用一堆愚蠢的逻辑自己完成此操作。
- 这是初始过渡吗？
- 我们要进入模态状态吗？
- 然后取消转换并转至默认状态。
- 完成后，进入模态状态。
app.run(function($rootScope, $state) {
$rootScope.$on("$stateChangeStart", function(evt, toState, toParams, fromState, fromParams) {
if (fromState.name === "" && toState.name === "menu") {
// fromState is the root state. This is the initial transition.
evt.preventDefault(); // cancel transition to modal.
$state.go("defaultstate").then(function() { // Go to the default state
$state.go(toState, toParams); // When that state has loaded, go back to the menu state.
});
}
});
});
关于angularjs - 使用来自任何父级的 ui-router 的模态对话框，如何正确指定状态？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26216661/