使用UI路由器模式对话框任何父，如何正确指定的状态？

问题描述

我试图打开一个模式对话框采用了棱角分明的UI，路由器作为解释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的路由器模式附加功能演示：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（菜单，{
 

与响应更新

在评论中质疑：

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路由器模式对话框任何父，如何正确指定的状态？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！