Как вложить ng-view в ng-include?

При попытке добавить ng-view внутрь ng-include ничего не происходит. например в следующем коде, когда themes/midnight/index.html содержит ng-view, представление не отображается:

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

Однако, если я использую приведенный ниже код, представление отображается дважды:

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

В чем проблема и как ее решить?


angularjs angularjs-ng-include ng-view
person ccoroom    schedule 21.05.2013    source источник
comment
Что вы имеете в виду? Это не показывает ничего, связанного с представлением:   -  person Ven    schedule 21.05.2013
comment
Я имею в виду, что ng-view не появляется.   -  person ccoroom    schedule 21.05.2013
comment
Используете ли вы template-src в своих маршрутах? Немного больше кода было бы заметно :-). ng-view предназначен для просмотра $routeProvider.when(, {template-url: '...'});   -  person Ven    schedule 21.05.2013
comment
конечно, ng-view вне ng-include работает. только ng-view внутри ng-include не появляется. Когда я дважды объявляю ng-view внутри и снаружи ng-include, он появляется дважды. Очень странно для меня.   -  person ccoroom    schedule 21.05.2013
comment
может быть, это из-за какой-то изоляции, что-то странное происходит с прототипным наследованием. У вас есть jsfiddle/plunker?   -  person Ven    schedule 21.05.2013
comment
У меня на самом деле такая же проблема. Вы ее как-то решили?   -  person xil3    schedule 29.07.2013
comment
@ xil3 Это проблема области. Вы должны увидеть возможности angularjs. К сожалению, я не решил эту проблему. Я решил не использовать ng-include.   -  person ccoroom    schedule 13.08.2013

Ответы (1)


arrow_upward
30
arrow_downward

Эта проблема возникает из-за задержки создания экземпляра ng-view (проходящего через ng-include). В таком случае инстанцирование $route также задерживается, а $route пропустит событие смены местоположения (и маршрутизация вообще не будет выполняться).

Чтобы обойти это, вызовите функцию обновления $route при инициализации приложения:

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

Более того, достаточно включить только $route в качестве зависимости. Это тоже сработает:

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

Источник: соответствующая проблема на github.

Также проверьте ui-router, который специально предназначен для решения проблемы вложенные представления.

person Eliran Malka    schedule 30.11.2013
comment
Забавно, но на самом деле достаточно ввести $route в главный контроллер - это решило проблему для меня )) - person KOHb; 20.06.2014
comment
@KOHb - это эквивалентно объявлению его как зависимости для приложения. - person Eliran Malka; 24.09.2014
comment
как вы объявляете зависимость для приложения? Это то, что вы имеете в виду: angular.module('Main', [dependencies here]) ? - person KOHb; 25.09.2014
comment
@KOHb - я не имел в виду зависимость на уровне приложения - просто использовал DI для запроса службы (как показано в ответе). - person Eliran Malka; 28.09.2014
comment
это то, что я тоже имел в виду - просто инъекция $route исправила это для меня, мне даже не пришлось вызывать $route.reload(). Итак, добавив параметр $route, DI срабатывает и создает объект $route - и я предполагаю, что что-то происходит в конструкторе, потому что мне этого было достаточно. Спасибо! - person KOHb; 29.09.2014