Улучшить эту документацию Просмотреть исходный код ngInclude

директива в модуле ng

Обзор

Загружает, компилирует и включает внешний фрагмент HTML.

По умолчанию URL шаблона ограничен тем же доменным именем и протоколом, что и документ приложения. Это выполняется с помощью вызова $sce.getTrustedResourceUrl по нему. Чтобы загружать шаблоны с других доменных имен или протоколов, вы можете либо добавить их в белый список, либо обработать их как доверенные значения. Обратитесь к разделу Строгая защита от внедрения контекста AngularJS.

Кроме того, политика «Same Origin Policy» браузера и политика «Cross-Origin Resource Sharing (CORS)» могут дополнительно ограничить возможность успешной загрузки шаблона. Например, ngInclude не будет работать для междоменных запросов во всех браузерах, а для file:// доступа в некоторых браузерах.

Информация о директиве

Эта директива создает новую область видимости.
Эта директива выполняется на приоритетном уровне -400.

Использование

как элемент:

<ng-include
  src="string"
  [onload="string"]
  [autoscroll="string"]>
...
</ng-include>

как атрибут:

<ANY
  ng-include="string"
  [onload="string"]
  [autoscroll="string"]>
...
</ANY>

как класс CSS:

<ANY class="ng-include: string; [onload: string;] [autoscroll: string;]"> ... </ANY>

Аргументы

Параметр Тип Подробности

ngInclude | src

Параметр	Тип	Подробности
ngInclude \| src	`string`	Выражение AngularJS, вычисляющее URL. Если источник — строковая константа, убедитесь, что вы обернули её в одинарные кавычки, например `src="'myPartialTemplate.html'"`.
onload (необязательно)	`string`	Выражение, которое вычисляется при загрузке новой части. Примечание: При использовании onload на элементах SVG в IE11 браузер попытается вызвать функцию с именем onload на элементе window, что обычно приводит к ошибке "функция не определена". Для исправления этого можно использовать `data-onload` или другой вариант, который соответствует `onload`.
autoscroll (необязательно)	`string`	Указывает, нужно ли вызывать $anchorScroll для прокрутки области просмотра после загрузки содержимого. - If the attribute is not set, disable scrolling. - If the attribute is set without value, enable scrolling. - Otherwise enable scrolling only if the expression evaluates to truthy value.

string

Выражение AngularJS, вычисляющее URL. Если источник — строковая константа, убедитесь, что вы обернули её в одинарные кавычки, например src="'myPartialTemplate.html'".

onload

(необязательно)

string

Выражение, которое вычисляется при загрузке новой части.

Примечание: При использовании onload на элементах SVG в IE11 браузер попытается вызвать функцию с именем onload на элементе window, что обычно приводит к ошибке "функция не определена". Для исправления этого можно использовать data-onload или другой вариант, который соответствует onload.

autoscroll

(необязательно)

string

Указывает, нужно ли вызывать $anchorScroll для прокрутки области просмотра после загрузки содержимого.

- If the attribute is not set, disable scrolling.
- If the attribute is set without value, enable scrolling.
- Otherwise enable scrolling only if the expression evaluates to truthy value.

События

$includeContentRequested

Вызывается каждый раз, когда содержимое ngInclude запрашивается.

Тип:

emit

Целевой объект:

объект области видимости, в которой была объявлена директива ngInclude

Параметры

Параметр	Тип	Подробности
angularEvent	`Object`	Синтетический объект события.
src	`String`	URL загружаемого содержимого.

$includeContentLoaded

Вызывается каждый раз, когда содержимое ngInclude перезагружается.

Тип:

emit

Целевой объект:

текущая область видимости ngInclude

Параметры

Параметр	Тип	Подробности
angularEvent	`Object`	Синтетический объект события.
src	`String`	URL загружаемого содержимого.

$includeContentError

Вызывается, когда HTTP-запрос шаблона возвращает ошибочный ответ (статус < 200 || статус > 299).

Тип:

emit

Целевой объект:

объект области видимости, в которой была объявлена директива ngInclude

Параметры

Параметр	Тип	Подробности
angularEvent	`Object`	Синтетический объект события.
src	`String`	URL загружаемого содержимого.

Анимации

Анимация	Происходит
enter	при изменении выражения, для новой подгрузки
leave	при изменении выражения, для старой подгрузки

Анимации enter и leave происходят одновременно.

Нажмите здесь, чтобы узнать больше о шагах, участвующих в анимации.

Пример

© 2010–2018 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://code.angularjs.org/1.6.9/docs/api/ng/directive/ngInclude