0

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

IsraGab
  • 4,819
  • 3
  • 27
  • 46
  • example using ui-router-extras sticky states (for modal) and previous states (for going back to calling state): http://christopherthielen.github.io/ui-router-extras/example/stickymodal/#/ – Chris T Mar 22 '15 at 18:09
  • Thank you for the link, but I'm sure there is a solution with the regular ui-router. – IsraGab Mar 22 '15 at 19:29
  • Read the source of the linked lib – Chris T Mar 22 '15 at 19:34
  • I think, this solution is enough for me : http://stackoverflow.com/questions/16635381/angularjs-ui-route-get-previous-state – IsraGab Mar 22 '15 at 19:34

0 Answers0