使用Angular UI路由器，如何使状态成为所有状态的子状态？

Question

I'd like to make modal dialog boxes into a separate state within Angular UI Router. However, I have a case where the modal box can/should appear on top of all states... and I am not sure if this is possible.

So for example, let's say I have /store and /admin as 2 separate top-level states. Now imagine that I have a modal dialog that is unrelated, like a contact form (just as an example) that should go on top of each.

If I model this as /contact , the /store or /admin states are obviously forgotten, so the background behind the modal is blank.

The solution might be to have two child states, like /store/contact and /admin/contact , and this preserves the content behind the modal dialog box... however, this approach does not scale for X number of top-level states.

In a nutshell, how can I say that /contact is a child of all states, regardless of nesting? Is this possible? Or do I simply have to not use angular UI router in this case?

Answer 1

The UI-Router state machine is expressed with parent-child relations. So the answer is - each child can have just/exactly one Parent . That's a fact. And it could be treated as "kind of not working answer" .

But, in case that we really would like to have many child states /contact (where contact feature is moved to its own state) , I would not say that repeating of definition is an issue.

It could be marked as overhead, but state is just a configuration . It does not affect the performance so much. The views and controllers are instantiated per state anyhow... regardless of its state def.

// declare once view
var contactState = {
  controller: ...
  template: ...
  ...
};

// reuse as need for some ...
stateNamesWithContact.forEach( function(stateName)
{
    // regiester state many times as "some.parnet.child.contact"
    $stateProvider
        .state(stateName + ".contact", contact);
    ...

Another approach, which I would perfer, is to NOT use Contact as a substate. Move it into view (which functionality will support modals)

Multiple Named Views

Defined once, in root state - as a view

In case, that Contact view/controller are static, we can just hook them into supper root state:

.state("root", {
    views : {        
        "" : {
           template: "<ui-view />" // here will be injected all children
        }
        "contact@" : {
           ... //setting of the Contact view / controller
        }
    }
}

Now, each "parent" state can profit from the above, without having affected url or name (no need to have "root.someParent" if parent setting is used)

.state("someState", {
    parent: "root"
    ...