Modal dialog using ui-router from any parent, how

2019-03-16 07:13发布

站内问答 / 前沿技术
559 1 4

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?

1条回答
看我几分像从前
2楼-- · 2019-03-16 07:35

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) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)