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.

Community
  • 1
  • 1
Daniel F
  • 340
  • 1
  • 3
  • 16
  • The [second answer](http://stackoverflow.com/a/23997704/4341456) from the last question you posted seems to fit. – Daniel Jan 25 '16 at 08: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`). – Daniel F Jan 25 '16 at 08:06

1 Answers1

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.

DavidNJ
  • 189
  • 1
  • 8
  • 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. – Daniel F Jan 25 '16 at 15:08