18

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?

Charles
  • 50,943
  • 13
  • 104
  • 142
ccoroom
  • 699
  • 9
  • 23
  • What do you mean "This doesn't show any view related thing:" ? – Ven May 21 '13 at 16:01
  • I mean ng-view doesn't appear. – ccoroom May 21 '13 at 17:45
  • Are you using `template-src` in your routes? A bit more code would be appreciable :-). `ng-view` is for use view `$routeProvider.when(, {template-url: '...'});` – Ven May 21 '13 at 17:47
  • of course, ng-view outside of ng-include works. only ng-view inside ng-include doesn't appear. When I'm declare ng-view twice inside and outside of ng-include, it appears twice. Very weird to me. – ccoroom May 21 '13 at 18:08
  • maybe it's because some kind of isolating, something weird happening with prototypal inheritance. Do you have a jsfiddle/plunker? – Ven May 21 '13 at 18:19
  • 1
    I'm actually having the same issue. Did you resolve it somehow? – xil3 Jul 29 '13 at 17:09
  • @xil3 This is a scope issue. You should see the scope of angularjs. Unfortunately, I did not solve this problem. I decided not to use ng-include. – ccoroom Aug 13 '13 at 09:19

1 Answers1

30

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.

Eliran Malka
  • 15,821
  • 6
  • 77
  • 100
  • 1
    Funny, but it's actually enough to inject $route in the main controller - this fixed the issue for me )) – KOHb Jun 19 '14 at 20:38
  • 1
    @KOHb - this is equivalent to declaring it as a dependency for the app. – Eliran Malka Sep 24 '14 at 08:16
  • how do you declare dependency for the app? Is this what you mean: `angular.module('Main', [dependencies here])` ? – KOHb Sep 25 '14 at 12:57
  • @KOHb - I didn't mean dependency at the app level - just using DI to request the service (as shown in the answer). – Eliran Malka Sep 28 '14 at 07:46
  • 1
    that's what I meant, too - just injecting $route fixed it for me, I didn't even have to call $route.reload(). So by adding $route parameter DI kicks in and creates the $route object - and my guess is that something happens in constructor, because that was enough for me. Thanks! – KOHb Sep 29 '14 at 14:49