Optional support for keeping a view around

[coli]

Add an option to a state that tells ui-view to keep it around even after route changes (then switch back to the old one instead of re-create it)

Use case is using ui-view for the content section of a tab.

<div>
  <tab-headers/>
  <ui-view/>
</div>

[ksperling]

Hmmm, if you want to keep all tabs in memory even when they're not visible, maybe it's better to use ng-show or ui-show or something like that?

If we had an option for ui-view to keep old view instances (i.e. DOM + scope + controllers) around, we would need to have some way of preventing the number of 'back' views and memory used by the from growing out of bounds.

[coli]

I'd imaging it's done per ui-view. So if the parent ui-view changes, the child ui-view will all be destroyed.

Hmm, the ability to arbitrary target named views makes this complicated.

[coli]

It just occured to me this can be done at the state,view level.

Eg:

.state('report',{
  views: {
    'filters@report': {
      templateUrl: 'report-filters.html',
      persist: true
    },
}})

Then the specific ui-view would keep that template around, and it'll only be destroyed when the parent changes. This assumes that the view targeted is the same ui-view though...

[coli]

Actually, restrict the usage to absolute view targeting would make it work for now. Am I right?

[coli]

Also, if you think this is workable, I'll go ahead and implement it, we need something like it :) (for our tabs which contain iframe... )

[timkindberg]

Isn't this what $templateCache is for?

[ksperling]

I'd rather wait a bit with implementing this until we have the core features working fully. It's starting to become more apparent to me that we should really factor out view management into a separate $view service, which is where this sort of behaviour could then be plugged in.

I'm still not convinced it's really the right thing to do in many cases though -- needing to keep the DOM and controllers for these tabs around seems to imply that the DOM and controllers are holding more state than they should be?

[coli]

Ah, okay. In my case, iframe has an extra restriction, if you pull them out of the dom tree then reinsert them, the iframe get's reloaded. Which we don't want when we host separate iframe in tabs. In chrome there is a workaround but other browser doesn't.

[coli]

@timkindberg this is about keeping the dom (and associated controller/scope/etc) around hidden. It's mainly for tabs.

[ksperling]

@coli I wonder if you'd also need to detach the scope from it's parent somehow, to avoid your hidden tabs receiving events and stuff like that.

[coli]

@ksperling I never thought about it ;) Hmm, I'm not sure... although if I model it after ng-show, it means keep everything around, including the scope. There might be events like view-show, view-hidden, that the child can listen to, if they really want.

[jeme]

@coli We have established as much as this is about tab, but what are you thinking in terms of fitting it into the state machine, is this because you are trying to have urls that would point to the page but open a specific tab etc?... Like

/page/with/tabview/tab1
/page/with/tabview/tab2
/page/with/tabview/tab3

In which case we are talking only a single tab view pr. page, alternatively:

/page/with/tabview?tabx=tab1
/page/with/tabview?tabx=tab2
/page/with/tabview?tabx=tab3

which would allow for:

/page/with/tabview?tabx=tab1&taby=tab6

In any case, I am asking for the use case, to see if there would be an alternative way of doing this while leaving the ui-router alone... Ultimately I think that modeling a tab-view as a directive would make sense, tabs could still lazy load, but just need to know what link to the routing your looking for.

e.g.

<ui-tabview>
  <ui-tab title="Some Title"> Content </ui-tab>
  <ui-tab title="Other Title" src="othertab.html" />
</ui-tabview>

Then either let the tab view capture things after "?"... The stateProvider would need to support "ReloadOnSearc=False" though... OR through some sort of active tab binding to the scope we could maybe let sub-states control the current tab.

I am just trying to think out of the box, as allowing for the "persist" on the views seems like something that is more complex than it might sound...

Edit: Actually, might even be able to fit it up against:

http://angular-ui.github.com/bootstrap/#/tabs

Somehow.

[coli]

@jeme I'm thinking of something like

/section/tab1/section2/tab2/section3

Where tab as a concept disappears and becomes a row of navigation buttons :) I need the ability to nest tabs, just like ui-view. It makes the most sense to turn tabs into a list of buttons that does navigate. Then have ui-view host the tab content. And you get arbitrary nesting/url/navi for free.

[coli]

Currently I actually have /section?tab=tab1, but it breaks down as soon as I try to nest more navigation into it.

[coli]

Here's an example UI http://www.vladan.fr/wp-content/uploads/images/vSphere-web-client2.jpg