6

I have a simple layout like so:

__________________  ________
|                |  | Side |
|  Main section  |  | -bar |
|________________|  |______|

The "Main section" exposes forms to the user; based on their selection that "Main section" state should change (i.e.: a different partial should be loaded). How do I facilitate this with UI.router?

E.g.: change only columnOne in the /about state: http://plnkr.co/edit/IzimSVsstarlFviAm7S7

A T
  • 13,008
  • 21
  • 97
  • 158

1 Answers1

10

When the state changes, all the new state's views and those of any ancestor state will be loaded. So if you want view A to remain unchanged while view B changes to view C, then view A's state will have to be an ancestor of views B and C. So you need an intermediary (possibly abstract) state.

Here is a Plunker.

dave walker
  • 3,058
  • 1
  • 24
  • 30
  • So basically you're saying that the only solution is to replicate the layout code in each state? - I.e.: `
    `, `
    ` &etc.?     – A T Jun 11 '14 at 23:00
  • Ok, I see what you're getting at now. You need to use a named view in a parent state. Will update. – dave walker Jun 11 '14 at 23:48
  • Thanks, that's what I was after. – A T Jun 12 '14 at 06:32
  • @AT - I've added a Plunker. Hope this helps. Please excuse the styling. – dave walker Jun 13 '14 at 00:29
  • Hi @david004. I slightly edited your version, but can't seem to get it to work: http://jsfiddle.net/a3YCM – A T Jun 16 '14 at 10:40
  • Fork from my Plunker and make your changes incrementally until it breaks, then let me know which change broke it. I will then try and tell you why. Use Plunker. – dave walker Jun 16 '14 at 13:41
  • I have isolated the problem: it's from facilitating multiple named views. http://stackoverflow.com/q/24265610 – A T Jun 17 '14 at 14:21