ngView nested inside ngInclude

[jeremyalan]

Problem:
I ran across an issue where the page wasn't being initialized properly when the ng-view tag was nested inside of an ng-include tag. This caused my ng-view to remain empty until the location was changed.

Plunker: http://plnkr.co/mj80TN0FXQH41grccSWN

Solution:
When linking the ng-view directive, the current route should be reloaded.

I was able to duplicate the issue and verify the resolution as a one-line change within the ngView directive by calling $route.reload(). As a temporary work-around, this call can also be made from a custom directive (as demonstrated in the Plunker example), or from the Controller monitoring the $scope.

I would love to hear your thoughts, and would be happy to submit a pull request with this change, if you prefer.

[dlukez]

I found that injecting $route into the 'run' function of your module gets it working without anything else.

http://plnkr.co/edit/xVmJKvAf781Pvnx3N5t6?p=preview (I took out jQuery to minimise extra stuff)

Looks like maybe $route doesn't set the 'current' property when it's first instantiated..?

-- EDIT --

https://github.com/angular/angular.js/blob/master/src/ngRoute/route.js#L446

Adding a updateRoute() call before the $rootScope.$on seems to work, as in this plunker:
http://plnkr.co/edit/gcmN9j3bKLoHx3oSLzt6?p=preview (angular-route.js, line 451)

...but it breaks 3 unit tests (sigh), albeit ones that simply assert $route.current to be undefined (simple to change, hopefully wouldn't break anything).

Also, I feel like it's probably not the best solution...

[IgorMinar]

this looks like some kind of weird timing issue.

$route is instantiated when we come across ngView and construct it, because in this case ngView is found only after expanding ngInclude, this instantiation of $route is deferred slightly which causes the $route to miss the initial $locationChangeSuccess event which is fired during the bootstrap.

to fix this, we should just call updateRoute() right after the $route service is constructed.

PRs are welcome!

[oleastre]

I just updated our code base to angular 1.2.12 and this issue is not solved.
As PR #5681 has been reverted and no other solution have been found, shouldn't this issue be re-opened ?

[dlukez]

Yeah it should, I've been super busy lately and haven't been able to fix up my PR. I'm hoping I can get to it this week though!

[ihteandr]

I just updated our code base to angular 1.3 and this issue is not solved. Now ng-view missed when template is loaded.

[caitp]

@ihteandr see #5681 (comment) --- the fix was reverted.

[ihteandr]

Do you think this problem be resolved next week or near time?, or be better no wait changes and change my application architecture.
p.s.sorry for my english

[caitp]

It's not likely to be fixed next week

[oleastre]

Do not change your application architecture... as explained in first comment, there is a workaround:
First declare a simple directive that when linked will reload routes:

angular.module('app', ['ngRoute']).directive('ngViewFix', function ($route) {
  return function () {
    $route.reload();
  };
});

Surround your ng-view call with this new directive like:

<div ng-view-fix><div ng-view></div></div>

[ihteandr]

I already use this method like that, but ngView is missed stay only and nothing happen, I think maybe problem in my code

[ihteandr]

Ok, Thanks your method work nice