发表新帖
发表新帖

Modal dialog using ui-router from any parent, how to correctly specify state?

前端 未结
关注
1 921
无人及你
无人及你 2021-02-06 06:59

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 bu

相关标签:
1条回答
  • 情书的邮戳
    2021-02-06 07:52

    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.
      });
    }
  });
});
    0 讨论(0)
 看不清?
提交回复
热议问题