fus*_*sio 8 angularjs bootstrap-modal angular-ui-router
我试图打开一个模式对话框采用了棱角分明的UI路由器作为解释在这里.
目标是可以在任何地方访问对话框,不一定需要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"的孩子,因为我希望它可以从任何地方访问.我怎样才能做到这一点？
Chr*_*s T 17
您可以使用UI-Router Extras"Sticky States"执行此操作.
更新了plunk: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,为模态添加了一个
<body>
<div ui-view="app"></div>
<div ui-view="modal"></div>
</body>
然后我将您的应用状态标记为sticky并使您的模态状态成为顶级状态.结果是你可以从任何app.*状态导航到模态状态......它不会退出该状态,而只会"停用"它,它仍然存在于DOM中.
$stateProvider
.state("app", {
url: "",
abstract: true,
sticky: true,
modalStateProvider.state("menu", {
快速问题:如果我给"菜单"状态一个URL(/菜单)并且用户转到该URL(website.com/menu)有没有办法为应用程序视图设置"默认"粘性？(类型的默认父模式)
你可以使用一堆愚蠢的逻辑自己做.
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.
});
}
});
});