使用来自任何父级的 ui-router 的模态对话框，如何正确指定状态? [英] Modal dialog using ui-router from any parent, how to correctly specify state?

问题描述

我正在尝试使用 Angular 的 ui-router 打开模态对话框，如这里.

目标是让对话框可以在任何地方访问，不一定需要 url，但如果我可以链接到打开对话框的页面，那就太好了.

这是损坏的样本:

http://plnkr.co/edit/BLkYME98e3ciK9PQjTh5?p=preview

点击菜单"应该会从任一页面打开对话框.

路由逻辑:

app.config(function($stateProvider,$locationProvider, $urlRouterProvider, modalStateProvider) {$urlRouterProvider.otherwise("/");$locationProvider.html5Mode(true);$stateProvider.state(应用程序"，{网址:"",抽象:真实，意见:{":{templateUrl: "main.html",},标题@应用程序":{templateUrl: "header.html"},页脚@应用程序":{templateUrl: "footer.html"}}}).state("app.home", {网址:/"，templateUrl: "home.html",}).state("app.content", {网址:/内容"，templateUrl: "content1.html",});modalStateProvider.state("app.home.menu", {模板:我是一个对话框！"，控制器:函数($scope){$scope.dismiss = function () {$scope.$dismiss();};}});});

它不应该是app.home"的孩子，因为我希望它可以从任何地方访问.我怎样才能做到这一点?

解决方案

您可以使用 UI-Router ExtrasSticky States"来做到这一点.

更新的 plunk:http://plnkr.co/edit/GYMjzmBALlQNFWoldmxa?p=preview

这是 UI-Router Extras 模态演示:http://christopherthielen.github.io/ui-router-extras/example/stickymodal/#/

<小时>

为了更新你的 plunk，我添加了 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，为模态添加了一个

<div ui-view="app"></div><div ui-view="modal"></div>

<小时>

然后我将您的应用状态标记为 sticky 并使您的模态状态成为顶级状态.效果是您可以从任何 app.* 状态导航到模态状态......而不是退出该状态，它只会停用"它，并且它会保留在 DOM 中.>

$stateProvider.state(应用程序"，{网址:"",摘要:真实，粘性:真实，

<小时>

modalStateProvider.state("menu", {

更新了评论中的问题回复:

<块引用>

快速问题:如果我给菜单"状态一个 URL (/menu) 并且用户转到该 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 是根状态.这是最初的过渡.evt.preventDefault();//取消转换到模态.$state.go("defaultstate").then(function() {//进入默认状态$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 sticky and made your modal state a top-level state. The effect is that you can navigate from any app.* 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-router 的模态对话框，如何正确指定状态?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！