0

One of the main reasons to use ui-view is listed as having multiple views:

main page
    - header
    - content
    - footer
*other page*
    - header
    - content
    - footer

However, views appear to be tied to states. If I have a header state, I cannot include it in a list detail state with <div ui-view='header'> because header is not a view in list detail.

I am not interested in a hacky answer, as this appears to be the major benefit of ui-router (eg http://www.funnyant.com/angularjs-ui-router/). If I can't get this to work in a clean way, I will go back to the default angular router.

What I have tried

I thought that possibly I would need to access a view in another state to make this work, but google is returning nothing for this.

This solution requires a seperate layout state and that every state be prefixed with root, which seems clunky. If this is an advertised selling point is there no better way to do this?

Multiple Named Views docs relies on all the views being defined for that specific state.

This similar question is answered with "use ng-include".

Another question on how to create a layout state is the closest to what I want, but requires a hacky root scope and that each child scope redefine a container@ view.

Improve this question
2
  • The second answer from the last question you posted seems to fit. Commented Jan 25, 2016 at 8:02
  • @Daniel It would work, but "Another question on how to create a layout state is the closest to what I want, but requires a hacky root scope and that each child scope redefine a container@ view." I was expecting the major advertised feature to have a clean implementation. For instance, a method to access a view in another state (such as "ui-view="nav.headers" to access view nav of state headers while in separate state items list). Commented Jan 25, 2016 at 8:06

1 Answer 1

Reset to default
0

It looks like you want to have a state with multiple views that is a child of an abstract state.

Abstract states are described here (https://github.com/angular-ui/ui-router/wiki/Nested-States-&-Nested-Views#abstract-states). You are interested in the example "To insert a template with its own ui-view(s) that its child states will populate."

Note that an abstract state can't be instantiated by itself. It is only used when one of its child states are used. In this case you may have only one child state with multiple views for the abstract state.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

I have read about abstract states. Could you explain how I can avoid the issues mentioned under what I have tried with them. I don't see how.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.