Search code examples
angularjsangularjs-ng-includeng-view

How to nest ng-view inside ng-include?

When trying to add an ng-view inside an ng-include, nothing happens. e.g. in the following code, when themes/midnight/index.html holds an ng-view, no view is rendered:

<ng-include src="'themes/midnight/index.html'"></ng-include>

However, if I use the code below, the view shows twice:

<ng-include src="'themes/midnight/index.html'"></ng-include>
<div ng-view></div>

What is the problem and how can I resolve it?

Solution

  • This problem occurs due a delayed instantiation of ng-view (passing through ng-include). In such case the $route instantiation is delayed as well, and $route will miss the location change event (and routing will not be performed at all).

    To bypass this, invoke the $route update function on application initialization:

    yourApp.run(['$route', function($route)  {
  $route.reload();
}]);

    Further more, it is sufficient to only include $route as a dependency. This will work, too:

    yourApp.run(['$route', angular.noop]);

    Source: the related issue on github.

    Also check out ui-router, which is intended to specifically deal with the issue of nested views.