Jak zagnieżdżać ng-view wewnątrz ng-include?

Question

Podczas próby dodania ng-view do wnętrza ng-include nic się nie dzieje. na przykład w poniższym kodzie, gdy themes/północy/index.html posiada ng-view, bez widoku jest renderowane:

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

Jednakże, jeśli mogę użyć poniższy kod, widok pokazuje dwukrotnie:

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

Na czym polega problem i jak mogę go rozwiązać?

Answer 1

Ten problem występuje z powodu opóźnionego utworzenia ng-view (przechodząc przez ng-include). W takim przypadku instancja $route jest również opóźniona, a $route przegapi zdarzenie zmiany lokalizacji (a routing nie zostanie w ogóle wykonany).

Aby to ominąć, należy wywołać funkcję $route aktualizacji na inicjalizacji aplikacji:

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

Co więcej, to wystarczy tylko to $route jako zależność. Będzie to działać też:

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

_{Źródło: powiązanego issue on github.}

---

Również sprawdzić ui-router, który jest przeznaczony specjalnie do czynienia z zagadnieniem zagnieżdżonych widoki.