AngularJS + ui-router opening a modal window as a separate route

S

styv2014-02-01 12:19:04

Angular

styv, 2014-02-01 12:19:04

Good afternoon.
Recently with Angular, using ui-router and bootstrap modal.
There was a need to open a modal window when switching to a separate route.
For example, I am on /find and when I click on contacts, a modal window should open and the address should change to /contacts. The modal window opens on onEnter. But the problem is that the previous views loaded in /find should remain (now ui-router removes them, because with a change in address, the state also changes) and after closing the modal window, the address must be changed back from /contacts to /find. Well, /find is not the only option (there are about 10 states now).
Nothing sensible comes to mind, does anyone have any suggestions?

Reply

Answer the question

In order to leave comments, you need to log in

3 answer(s)

R

Ruslan Lopatin, 2014-02-01
@lorus

The meaning of paths is that by going to a certain path, the user will receive a certain page. If your `/find` in one case is built over `/contacts`, and in the other - over something else, then this is not the way, but some kind of nonsense. And if the user refreshes the browser page, what then?
You'd better combine paths. For example, from the page `/contacts` open the page `/find/contacts`. Well, or `/contacts/find`, if it's more convenient. This will be the same page as `/contacts` but with a modal open.

S

Sergey, 2014-02-01
Protko @Fesor

without some base route, you can't set a new one while keeping the current one. That is, the contacts route must depend on something else.

S

Sergey Mishin, 2014-11-17
@sergeysmishin

Use Multiple Named Views https://github.com/angular-ui/ui-router/wiki/Multi...
In your case it will be something like this:

<body>
    
    <div data-ui-view="content"></div>

    <div data-ui-view="contacts"></div>

</body>

$stateProvider
            .state('find', {
                url: "/find",
                views: {
                    'content': {
                        templateUrl: "/content.html",
                        controller: 'registerController'
                    }
                }
            })
            .state('contacts ', {
                url: "/contacts ",
                views: {
                    'content': {
                        templateUrl: "/content.html",
                        controller: 'contentController'
                    },
                    'contacts': {
                        templateUrl: "/contacts.html",
                        controller: 'contactsController'
                    }
                }
            });