Sto provando a creare uno stato che si comporta come un popup, ovvero non cancella lo stato corrente, si apre semplicemente su di esso senza distruggere completamente lo stato corrente (So che l'utente può accedervi chiudendo il popup).Creazione di un popup come stato utilizzando l'ui-router AngularJS
fortemente semplificate, i miei percorsi Applications è qualcosa di simile al seguente:
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>
- Utente è presentato con una schermata di login
- volta effettuato l'accesso, l'utente viene reindirizzato a
authenticated.home
stato. Lo stato genitore autenticato contiene un menu di navigazione e<ui-view>
per allegare subviews - L'utente può utilizzare questa navigazione per spostarsi all'interno dell'applicazione su altri percorsi come
authenticated.statistics
,authenticated.popup
.
Il problema è che, quando ho semplicemente passare allo stato popup, anche se ho specificato popup
vista dentro è vista oggetto, si cancella l'altro ui-view
(ha un senso, però, perché non siamo più in una siamo stato che lo corrisponde).
Una soluzione che posso pensare è di utilizzare qualcosa come ui-router-extras per tornare allo stato precedente, il problema con questo è che tutte le modifiche che l'utente potrebbe aver fatto negli stati precedenti andranno perse.
Un'altra soluzione sarà avere il modello di popup nel modello di stato authenticated
e mostrarlo/nasconderlo. Ma il problema con questo è che, il popup dovrebbe essere uno stato compatibile con i segnalibri, che carica i dati dal server in base ai parametri di stato.
C'è un approccio migliore per creare uno stato che si comporta come un popup sullo stato corrente? magari cambiando la struttura del template o usando qualcosa come abstract-states a cui non ho pensato?
Qualsiasi motivo per cui [stati appiccicosi] (http://christopherthielen.github.io/ui-router-extras/#/sticky) da ui-router-extras ha vinto funziona? Hanno un [esempio qui] (http://plnkr.co/edit/qgt0RkEnXDPDTdMJPIfy?p=preview) e per quanto posso dire non c'è perdita di informazioni durante l'utilizzo del modale. –
@AhmedWagdi Grazie, sembra promettente. Verificherò Forse puoi pubblicare una risposta –