Creating a popup using AnglerJS ui-router

Question

I am trying to create a state that acts like a pop-up window, that is, it does not clear the current state, it just pops up over it without completely destroying the current state (so that the user can access it by rejecting the pop-up window).

Highly simplified, my application routes look something like this:

angular.module('test', ['ui.router']) .config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) { $stateProvider .state('login', { url: '/login', template: '<button><a ui-sref="authenticated.home">Login</a></button>' }) .state('authenticated', { url: '/authenticated', template: '<p>We are now authenticated</p>' + '<a ui-sref="authenticated.home">home</a>' + '<a ui-sref="authenticated.statistics">statistics</a>' + '<a ui-sref="authenticated.popup">Popup!</a>' + '<div ui-view></div>' + '<div ui-view="popup"></div>' }) .state('authenticated.home', { url: '^/home', template: '<p>We are in home. <br><input></p>' }) .state('authenticated.statistics', { url: '^/statistics', template: '<p>We are in statistics. <br><input></p>' }) .state('authenticated.popup', { url: '^/popup', views: { popup: { template: '<div id="popup"><p>popup is up</p>' + '<a ui-sref="authenticated.home">close</a>' + '</div>' } } }); $urlRouterProvider.otherwise('/login'); } ]); 

 a { margin-right: 20px; text-decoration: none; } #popup { position: absolute; top: 0; bottom: 0; width: 100%; background: #000; color: #fff; } 

 <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script> <div ng-app="test"> <div ui-view> </div> </div> 

• User gets login screen
• After logging in, the user is redirected to authenticated.home state. The authenticated parent state contains a navigation menu and <ui-view> for attaching subviews
• The user can use this navigation to navigate the application to other routes, such as authenticated.statistics , authenticated.popup .

The problem is that when I just go to the popup state, even if I specify a popup view inside it, then I see the object, it clears another ui-view (it makes sense because we no longer enter the state that corresponds to it) .

One solution that I can think of is to use something like ui-router-extras to return to the previous state, the problem is that any changes that the user could make in previous states will be lost.

Another solution would be to have a popup template in the authenticated state template and show / hide it. But the problem is that the pop-up should be a bookmarked state that downloads data from the server based on the state parameters.

Is there a better approach for creating a state that acts as a popup for the current state? perhaps by changing the structure of the template or using something like abstract-states that I did not think about?

Answer 1

sticky states add from ui-router-extras should be what you are looking for. Provides you the ability to create sticky / parallel states, so it should allow you to create a pop-up state without affecting the original state you were in.

I have not experimented with it enough to find out all the details, but the main idea is to move all the basic states in the root application and set the sticky value to true:

 $stateProvider.state('app', { url: '', views: { 'app': { templateUrl: 'app.html', controller: 'mainCtrl', } }, sticky: true }); $stateProvider.state('app.account', { url: '/account', templateUrl: 'account.html' }); $stateProvider.state('app.account.stuff', { url: '/stuff', template: "<h3>Here my stuff:</h3><ul><li>stuff 1</li><li>stuff 2</li><li>stuff 3</li></ul>" }); 

After that, add your modal state as a sibling (not as a child of the root application)

 $stateProvider.state('modal', { url: '/modal', views: { 'modal': { templateUrl: 'modal.html' } } }); 

I took the example presented in the docs and made some changes to add controllers and simplified it: http://plnkr.co/edit/4JGdIcDUQs0Za4fBaLj1?p=preview

Answer 2

sounds like something abstract state can fix.

changing your “authenticated” state to an abstract parent and attaching a controller to it can allow you to convert axx data to child states. You can also simply create a separate controller for your data and reset the ng-controller to the body tag.

If you are still having problems, how do you use LocalStorage to save the required data?

Update2 Found a post and changed plnk to update the ng model as I type, but I understand why the OP wants a popup.

Edit Example Plnkr General Status

I will try to find a good example , but there is some pseudo code here.

 .state('authenticated', { abstract: true, url: '/authenticated', controller: 'AuthStateController', template: '<p>We are now authenticated</p>' + '<a ui-sref="authenticated.home">home</a>' + '<a ui-sref="authenticated.statistics">statistics</a>' + '<a ui-sref="authenticated.popup">Popup!</a>' + '<div ui-view></div>' + '<div ui-view="popup"></div>' }) 

I believe with or without {abstract: true} your popup state must have access to data inside the "AuthStateController". Solutions can be a redundant solution, but they can give you an idea of ​​how to use controller data more efficiently. If all else fails, create a data processing service.

 .state('authenticated.popup', { url: '^/popup', views: { popup: { resolve: { ctrl: 'AuthStateController', data: function(ctrl) { return ctrl.data_for_popup; } } template: '<div id="popup"><p>popup is up</p>' + '<a ui-sref="authenticated.home">close</a>' + '</div>' } } }) 

Answer 3

You are probably looking on your homepage. You need to save 2 ui-view in your index.html or base template.

And then at boot time, the states do something like:

  $stateProvider.state('stateNAme', { url: '/name', views: { "main": { controller: '1Controller', templateUrl: 'tpl1.html' }, " sidebar@ ": { controller: '2Controller', templateUrl: 'tpl2.html' } } 

Read here for the plural name views