ngInclude
- - directive in module ng
Overview
Fetches, compiles and includes an external HTML fragment.
By default, the template URL is restricted to the same domain and protocol as the application document. This is done by calling $sce.getTrustedResourceUrl on it. To load templates from other domains or protocols you may either add them to your trusted resource URL list or wrap them as trusted values. Refer to AngularJS's Strict Contextual Escaping.
In addition, the browser's
Same Origin Policy
and Cross-Origin Resource Sharing (CORS)
policy may further restrict whether the template is successfully loaded.
For example, ngInclude
won't work for cross-domain requests on all browsers and for file://
access on some browsers.
Directive Info
- This directive creates new scope.
- This directive executes at priority level -400.
Usage
- as element:
<ng-include src="string" [onload="string"] [autoscroll="string"]> ... </ng-include>
- as attribute:
<ANY ng-include="string" [onload="string"] [autoscroll="string"]> ... </ANY>
- as CSS class:
<ANY class="ng-include: string; [onload: string;] [autoscroll: string;]"> ... </ANY>
Arguments
Param | Type | Details |
---|---|---|
ngInclude | src | string |
AngularJS expression evaluating to URL. If the source is a string constant,
make sure you wrap it in single quotes, e.g. |
onload
(optional)
|
string |
Expression to evaluate when a new partial is loaded.
Note: When using onload on SVG elements in IE11, the browser will try to call
a function with the name on the window element, which will usually throw a
"function is undefined" error. To fix this, you can instead use
data-onload or a
different form that matches onload .
|
autoscroll
(optional)
|
string |
Whether
|
Events
-
$includeContentRequested
Emitted every time the ngInclude content is requested.
Type:
emitTarget:
the scope ngInclude was declared inParameters
Param Type Details angularEvent Object Synthetic event object.
src String URL of content to load.
-
$includeContentLoaded
Emitted every time the ngInclude content is reloaded.
Type:
emitTarget:
the current ngInclude scopeParameters
Param Type Details angularEvent Object Synthetic event object.
src String URL of content to load.
-
$includeContentError
Emitted when a template HTTP request yields an erroneous response (status < 200 || status > 299)
Type:
emitTarget:
the scope ngInclude was declared inParameters
Param Type Details angularEvent Object Synthetic event object.
src String URL of content to load.
Animations
Animation | Occurs |
---|---|
enter | when the expression changes, on the new include |
leave | when the expression changes, on the old include |
The enter and leave animation occur concurrently.
Click here to learn more about the steps involved in the animation.Example
<div ng-controller="ExampleController">
<select ng-model="template" ng-options="t.name for t in templates">
<option value="">(blank)</option>
</select>
url of the template: <code>{{template.url}}</code>
<hr/>
<div class="slide-animate-container">
<div class="slide-animate" ng-include="template.url"></div>
</div>
</div>