I have a classic set-entity situation whereby the user chooses an item from a list and it is displayed in a view next to the list.
A typical way of implementing this with UI router would be to have a template which holds the html for the list and an ui-view for a list item, and the item state is a child of the list state.
I would however like the item and list states to be siblings instead, with their templates being plugged into named ui-views:
$stateProvider.state("inbox", {
abstract: true,
url: "/inbox",
templateUrl: "inbox.html"
}).state("inbox.list", {
url: "?filter_by",
views: {
list: {
templateUrl: "inbox.list.html",
controller: "ListCtrl"
}
}
}).state("inbox.thread", {
url: "/:id?filter_by",
views: {
thread: {
templateUrl: "inbox.list.html",
controller: "ListCtrl"
}
}
})
inbox.html:
<div class="wrapper">
<div class="more wrappers">
<ul ui-view="list"></ul>
</div>
<div ui-view="thread"></div>
</div>
The obvious problem here is that as soon as you choose a thread from the list, the list itself disappears. This can be fixed by duplicating the "list" view configuration in the "inbox.thread" state, however the list view will still reload every time I choose a new thread.
The reason I want them as sibling states is so that I can filter the list and thus target only the "list" named ui-view while preserving the thread view with whichever thread was chosen.
So -- is there a way to persist sibling named ui-views?