Улучшить эту документацию Просмотреть исходный код ngInclude
- Директива в модуле ng
Загружает, компилирует и включает фрагмент внешнего HTML.
По умолчанию URL шаблона ограничен тем же доменным именем и протоколом, что и документ приложения. Это делается с помощью вызова $sce.getTrustedResourceUrl на нём. Для загрузки шаблонов с других доменных имён или протоколов вы можете либо добавить их в белый список, либо обернуть их как надёжные значения. Обратитесь к Строгой контекстной экранизации Angular.
Кроме того, политика «одного источника» браузера и политика совместного использования ресурсов (CORS) могут дополнительно ограничить возможность успешной загрузки шаблона. Например, ngInclude не будет работать для междоменных запросов во всех браузерах и для file:// доступа в некоторых браузерах.
Информация о директиве
- Эта директива создаёт новый контекст.
- Эта директива выполняется на уровне приоритета 400.
Использование
- как элемент: (Эта директива может использоваться как пользовательский элемент, но будьте внимательны к ограничениям IE).
<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>
Анимации
Анимация enter используется для вставки нового содержимого в браузер. Анимация leave используется для анимированного удаления существующего содержимого.
Анимации enter и leave выполняются одновременно.
Нажмите здесь, чтобы узнать больше о шагах, вовлечённых в анимацию.Аргументы
| Параметр | Тип | Подробности |
|---|---|---|
| ngInclude | src | string | Выражение Angular, вычисляющее URL. Если источник является строковой константой, убедитесь, что вы обернули его в одинарные кавычки, например |
| onload (необязательно) | string | Выражение, которое вычисляется при загрузке новой части. Примечание: При использовании onload на SVG-элементах в IE11 браузер попытается вызвать функцию с именем onload на элементе окна, что обычно приводит к ошибке «функция не определена». Чтобы исправить это, вы можете вместо этого использовать 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 StringURL загружаемого содержимого.
-
$includeContentLoaded
Вызывается каждый раз, когда содержимое ngInclude перегружается.
Тип:
emitЦелевой объект:
текущий контекст ngIncludeПараметры
Параметр Тип Подробности angularEvent ObjectСинтетический объект события.
src StringURL загружаемого содержимого.
-
$includeContentError
Вызывается, когда HTTP-запрос шаблона возвращает ошибочный ответ (статус < 200 || статус > 299)
Тип:
emitЦелевой объект:
контекст, в котором ngInclude был объявленПараметры
Параметр Тип Подробности angularEvent ObjectСинтетический объект события.
src StringURL загружаемого содержимого.
© 2010–2017 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://code.angularjs.org/1.4.14/docs/api/ng/directive/ngInclude