Change only one view on state change in ui.router?

Question

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

Solution

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.

Comments

[A T]

So basically you're saying that the only solution is to replicate the layout code in each state? - I.e.: <div ui-view="newcontent0"></div><div ui-view="sidebar"></div>, <div ui-view="newcontent1"></div><div ui-view="sidebar"></div> &etc.?

[dave walker]

Ok, I see what you're getting at now. You need to use a named view in a parent state. Will update.

[A T]

Thanks, that's what I was after.

[dave walker]

@AT - I've added a Plunker. Hope this helps. Please excuse the styling.

[A T]

Hi @david004. I slightly edited your version, but can't seem to get it to work: jsfiddle.net/a3YCM

[dave walker]

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.

[A T]

I have isolated the problem: it's from facilitating multiple named views. stackoverflow.com/q/24265610