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

Cripple

Answer 1

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.

Trappings

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.? – Cripple

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

Thanks, that's what I was after. – Cripple

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

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

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. – Trappings

I have isolated the problem: it's from facilitating multiple named views. https://mcmap.net/q/1773041/-scope-inheritance-fails-with-multiple-named-views – Cripple