个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我正在尝试使用 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/
24
4
0
我来自 Asp.Net 世界，试图理解 Angular State 的含义。 什么是 Angular 状态？它类似于Asp.Net中的ascx组件吗？是子页面吗？它类似于工作流程状态吗？ 我听到很多人
我一直在寻找 3 态拨动开关，但运气不佳。 基本上我需要一个具有以下状态的开关: |开 |不适用 |关 | slider 默认从中间开始，一旦用户向左或向右滑动，就无法回到N/A(未回答)状态。 有人
我是一名优秀的程序员,十分优秀！