javascript - AngularJS: How to set one state as a global parent in UI-Router (to use modal as common parts)

Question

In $stateProvider#state(), I define it as follows for Bootrtrap-ui modal using UI-Router. reference

var state = {
    name: 'modala',
    parent: 'home',
    onEnter: function($modal, $state) {
        modalInstance = $modal.open({
            templateUrl: 'modala.html',
            controller: 'modalaCtrl',
            controllerAs: 'modal'
        });
        modalInstance.result['finaly'](function() {
            modalInstance = null;
            if ($state.$current.name === 'modala') {
                $state.go('^');
            }
        });
    },
    onExit: function() {
        if (modalInstance) {
            modalInstance.close();
        }
    }
};

I want to use 'modala' any place other than home.

I do not want to create a lot of definitions of 'modala'.

Is there a method to accept it, and to set what is necessary in parent?

---

add explanation

No good solutions

1. Don't set parent in modal state.

   result: when open modal window, parent isn't displayed.

   pattern 1 example

2. modal state name is ${parent.name}.modal format.

   result: It's work. but, About one modal window, it is necessary to define many states. and, It is necessary to add a state whenever I add an parent who call modal.

   pattern 2 exapmle

3. define the modal state every parent

   result:same as pattern 2.

   pattern 3 exapmle

Answer 1

All you have to do is add the property parent: modala to all child states that you define in order to set a parent state.