I've written a code to have login and register in modal window. In the modal I have an ui-view to switch from one to a other (file called authenticate.html):
<div class="login-container" style="padding: 20px; min-height: 610px; " >
<a class="close" ng-click="close()" style=" float: right; font-size: 23px;
color: rgb(211, 214, 216);
margin-top: -15px;
margin-right: -5px;">x</a>
<h1 style="text-align: center">My Logo</h1>
<hr/>
<div ui-view="modal" ></div>
</div>
In my routes.js I have made a state 'modal' as abstract, which one's calling the authenticate.html and the controller. Also I have the 2 sub-states (login and signup) and bind them to their parent (the 'modal' state):
.state('modal', {
abstract: true,
//parent: this,
url: '/auth',
onEnter: ['$modal', '$state', function ($modal, $state) {
console.log($state);
$modal.open({
templateUrl: 'client/app/views/authentication.ng.html',
controller: 'AuthCtrl',
backdrop: 'static',
keyboard: false,
resolve: {
isLoggedIn: function () {
return false;
},
$state: function () {
return $state;
},
}
});
//.result.finally(function () {
// console.log('finally');
// console.log($state);
// $state.go('^');
// });
}],
onExit: function() {
console.log('onExit');
this.close();
}
})
.state('modal.login', {
url: '/login',
parent: 'modal',
views: {
'modal@': {
templateUrl: 'client/app/views/login.ng.html'
}
}
})
.state('modal.signup', {
url: '/signup',
parent: 'modal',
views: {
'modal@': {
templateUrl: 'client/app/views/signup.ng.html'
}
}
})
My problem is that I don't know how to call the modal and get the caller state. For example: If I am in the 'home' state and I call the modal, I would like to be able to return to 'home' when I close it. Same thing if I call it from a different state, I would like to be able to go back in the previous step when I close the modal. is the only way to give a parent to a state is to be hard-coded? Or it can be a variable? thank you