Make ui-view retain inner content as "no view" template

[adambabik]

Hi,

I've been testing $stateProvider as it's really great replacement for crippled $routeProvider and found interesting behaviour. When the element with ui-view directive is not empty, the first load of the template doesn't replace its content, but works like append. However, the next load replace the whole content of this element.

You can check a live demo here.

Important: This problem occurs only using AngularJS in version 1.1.4. The current stable version works as expected.

[timkindberg]

Does the problem occur with ng-view as well?

[jeme]

I think I saw an Issue like this in the Angular Core framework for the animator... see if I can dig it out at some point and link it.

Have you tried with 1.1.5 by any chance?

[adambabik]

@timkindberg Do you mean ng-view from ui.comapt? I checked it and it's working properly. Here is a demo. Strange as both directives use the same function $ViewDirective.

@jeme Oh, I didn't know that the new version came out. I checked with 1.1.5 and the same problem exists. However, with 1.0.7 (and 1.0.6) it's just fine.

[adambabik]

I dug dipper and the animator is involved indeed!

When rendering the template for the first time, $animator.leave is not called, because there is no existing viewScope. Instead, the $animator.enter is called, which is doing something like this: parent.append(element). So it actually appends the template. When the view tries to render the template again, the current viewScope is available, then $animator.leave is called and it's doing element.remove(). In fact, the element contains the whole content - existing and the append one. So later, $animator.enter appends the template to the completely empty parent element.

Why the example with ng-view is working correctly? I might be wrong but it seems like the original ng-view is called and it uses animate.leave always when updating the content, even for the first time. So it clears the content and then append the template.

[jeme]

Indeed, your right... should properly move these lines https://github.com/angular-ui/ui-router/blob/master/src/viewDirective.js#L33-L34 out of the if(viewScope) block.

[adambabik]

Yes, I have just tested the same solution and it's working fine. Do you want me to make a pull request or you'll handle this?

[jeme]

@dreame4 Sure, I am at work and won't get time during the day later... Also I don't know if there is other implications of moving it out (It doesn't seem so to me)... So with a PR we can have a more formal evaluation of it.

[ksperling]

The change looks fine to me, assuming that the animator is smart enough to not do anything if there is no content to animate.

A related question, should ui-view copy aside the initial content, and put it back if/when the view becomes unassigned? Effectively it would act as the 'this view is currently empty' template.

[timkindberg]

@ksperling said:

A related question, should ui-view copy aside the initial content, and put it back if/when the view becomes unassigned? Effectively it would act as the 'this view is currently empty' template.

That's a cool idea! Would cut down on a templateUrl load.

[nateabele]

Agreed, that would make ui-view way more useful.

[adambabik]

@ksperling I have tested several cases, including this, and the animator works just fine.

A related question, should ui-view copy aside the initial content, and put it back if/when the view becomes unassigned? Effectively it would act as the 'this view is currently empty' template.

Totally agree!

[nateabele]

@dreame4 Can you modify your patch and squash the commits?

[adambabik]

@nateabele Yes, I'll work on this today.