使用UI路由器模式对话框任何父，如何正确指定的状态？ [英] Modal dialog using ui-router from any parent, how to correctly specify state?
问题描述
我试图打开一个模式对话框采用了棱角分明的UI，路由器作为解释<一个href=\"http://stackoverflow.com/questions/24713242/using-ui-router-with-bootstrap-ui-modal\">here.
我们的目标是为对话框，在任何地方访问，不一定需要一个网址，但它会很好，如果我可以链接到一个网页对话框打开。
下面是破裂的试样：
<一个href=\"http://plnkr.co/edit/BLkYME98e3ciK9PQjTh5?p=$p$pview\">http://plnkr.co/edit/BLkYME98e3ciK9PQjTh5?p=$p$pview
点击菜单应该从任一页面打开对话框。
路由逻辑：
的app.config（函数（$ stateProvider，$ locationProvider，$ urlRouterProvider，modalStateProvider）{
$ urlRouterProvider.otherwise（/）;
$ locationProvider.html5Mode（真）; $ stateProvider
.STATE（应用程序，{
网址：
abstarct：真实，
观点：{
：{
templateUrl：main.html中
}，
头@应用：{
templateUrl：了header.html
}，
页脚@应用：{
templateUrl：footer.html
}
}
}） .STATE（app.home，{
网址：/，
templateUrl：/home.html的，
}）
.STATE（app.content，{
URL：/内容
templateUrl：content1.html
}）;
modalStateProvider.state（app.home.menu，{
模板：我是一个对话框！
控制器：函数（$范围）{
$ scope.dismiss =功能（）{
$ $范围解雇（）。
};
}
}）;
}）;
这不应该是app.home因为我希望它是从任何地方访问的孩子。我怎样才能做到这一点？
您可以与UI的路由器额外粘性美国做到这一点。
更新普拉克：<一href=\"http://plnkr.co/edit/GYMjzmBALlQNFWoldmxa?p=$p$pview\">http://plnkr.co/edit/GYMjzmBALlQNFWoldmxa?p=$p$pview
下面是UI的路由器模式附加功能演示：<一href=\"http://christopherthielen.github.io/ui-router-extras/example/stickymodal/#/\">http://christopherthielen.github.io/ui-router-extras/example/stickymodal/#/
要更新您的普拉克，我UI添加路由器附加功能：
＆LT;脚本src=\"https://rawgit.com/christopherthielen/ui-router-extras/0.0.10/release/ct-ui-router-extras.js\"></script>
VAR应用= angular.module（'plunker'，['ui.router'，'ct.ui.router.extras'，'ui.bootstrap']）;
我添加了一个名为UI的视图应用一个模态
＆LT;身体GT;
＆LT;格UI视图=应用程序＆GT;＆LT; / DIV＆GT;
＆LT;格UI视图=模式＆GT;＆LT; / DIV＆GT;
＆LT; /身体GT;
然后我打上你的应用程序状态粘稠，并提出您的模式状态的顶级状态。其效果是，你可以从任何应用程序导航。*的状态模式状态......不是退出这种状态下，它只会失活它，它仍然在DOM。
$ stateProvider
.STATE（应用程序，{
网址：
摘要：真实，
粘性：真实，
modalStateProvider.state（菜单，{
与响应更新
在评论中质疑：
快速的问题：如果我给了菜单状态的URL（/菜单），用户进入该URL（website.com/menu）有没有办法来设置一个默认为黏应用有何看法？ （排序的情态动词的默认父）
您可以用一堆愚蠢的逻辑做自己。
- 这是最初的过渡？
- 我们要去模式状态？
- 然后取消过渡，并进入到默认状态吧。
- 当这样做了，进入模式状态。
app.run（函数（$ rootScope，$州）{
$ rootScope。在$（$ stateChangeStart功能（EVT，toState，toParams，fromState，fromParams）{
如果（fromState.name ===与＆amp;＆安培; toState.name ===菜单）{
// fromState是根状态。这是最初的过渡。
。EVT preventDefault（）; //取消过渡到模态。
$ state.go（defaultstate）。然后（函数（）{//进入默认状态
$ state.go（toState，toParams）; //当该国已加载，回到菜单状态。
}）;
}
}）;
}）;I am trying to open a modal dialog using Angular's ui-router as explained here.
The goal is for the dialog to be accessible anywhere, a url is not necessarily needed but it would be nice if I could link to a page with the dialog open.
Here is the broken sample:
http://plnkr.co/edit/BLkYME98e3ciK9PQjTh5?p=preview
clicking on "menu" should open the dialog from either page.
The routing logic:
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(); }; } }); });It should not be a child of "app.home" since I want it to be accessible from anywhere. How can I achieve this?
解决方案You can do this with UI-Router Extras "Sticky States".
Updated plunk: http://plnkr.co/edit/GYMjzmBALlQNFWoldmxa?p=preview
Here is the UI-Router Extras modal demo: http://christopherthielen.github.io/ui-router-extras/example/stickymodal/#/
To update your plunk, I added 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']);
I added a named ui-view for the app and one for the modal
<body> <div ui-view="app"></div> <div ui-view="modal"></div> </body>
Then I marked your app state as
stickyand made your modal state a top-level state. The effect is that you can navigate from anyapp.*state to the modal state... instead of exiting that state, it will only "inactivate" it, and it remains in the DOM.$stateProvider .state("app", { url: "", abstract: true, sticky: true,
modalStateProvider.state("menu", {
updated with response to question in comments:
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)
You can do this yourself using a bunch of silly logic.
- Is this the initial transition?
- Are we going to the modal state?
- Then cancel the transition and go to the default state instead.
- When that's done, go to the modal state.
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. }); } }); });
这篇关于使用UI路由器模式对话框任何父，如何正确指定的状态？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
