4

I'm working on an angular app that has ui-router module. When entering a certain state of the router, I show a modal dialog, which then replaces my parent view. I would like to keep the parent view and show the modal as overlay. Is there a way to do it with ui-router?

To give an example:

$stateProvider.state("clients.list", {
    url: "/list",
    templateUrl: "app/client/templates/client-list.tpl.html",
    controller: moduleNamespace.clientListController,
    resolve: {
        clients: function (ClientService) {
            return ClientService.all();
        }
    }
})
// This will replace "clients.list", and show the modal
// I want to just overlay the modal on top of "clients.list"
.state("clients.add", {
    url: "/add",
    onEnter: function ($stateParams, $rootScope, $state, ngDialog) {
        ngDialog.open({
            controller: moduleNamespace.clientAddController,
            template: "app/client/templates/client-add.tpl.html"
        });

        $rootScope.$on("ngDialog.closed", function (e, $dialog) 
              if ($state.current.name !== "clients.list") $state.transitionTo("clients.list");
        });
    }
})

Thanks

Nix
  • 57,072
  • 29
  • 149
  • 198
mvovchak
  • 291
  • 5
  • 13
  • Why do you want this to be a state? Do you want to be able to open it via url ? – Nix Apr 22 '14 at 22:59
  • The other question i have are you expecting this to show up on top of your "list" view ? – Nix Apr 22 '14 at 23:08
  • hi @Nix, yes, I'd like the modal view to show up on top of list view. Also, I will need to open that modal view via url – mvovchak Apr 22 '14 at 23:13

1 Answers1

7

I think the proper solution would be something like:

$stateProvider.state("clients.list", {
    url: "/list",
    templateUrl: "app/client/templates/client-list.tpl.html",
    controller: moduleNamespace.clientListController,
    resolve: {
       clients: function (ClientService) {
          return ClientService.all();
      }
    }
})
.state("clients.list.add", {
    url: "^/add",
})

Important things are I made /add absolute by adding a ^. Most people would have just done /list/add because the default behavior of nested state is to add them together...the ^ bypasses this. You also would need to on state load style this thing so its a "modal" and is on top of other content.

And then inside of clients.list state you would need to update /client-list.tpl.html to have an ng-view that would style itself on top of the parent view.

I can create a plunkr if need be, but if I do that I am basically implementing everything for you.

Nix
  • 57,072
  • 29
  • 149
  • 198
  • Ahh, so use nested view for the modal. I did not know about the url ^, let me try and see what comes up. No need for plunkr :). Thanks! – mvovchak Apr 22 '14 at 23:22
  • 1
    My question might be similar (maybe even the same??). I generalized my code and included a thorough demo. If you're interested in checking it out that would be swell! http://stackoverflow.com/questions/25734053/a-state-that-opens-a-modal-over-the-current-sub-state-from-any-sub-state – m59 Sep 08 '14 at 22:32