View source Improve this doc

ngInclude
directive in module ng

Description

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 whitelist them or wrap them as trusted values. Refer to Angular'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.

Usage

This directive can be used as custom element, but be aware of IE restrictions.

as element:
<ng-include
       src="{string}"
       [onload="{string}"]
       [autoscroll="{string}"]>
</ng-include>
as attribute
<ANY ng-include="{string}"
     [onload="{string}"]
     [autoscroll="{string}"]>
   ...
</ANY>
as class
<ANY class="ng-include: {string}; [onload: {string};] [autoscroll: {string};]">
   ...
</ANY>

Directive info

  • This directive creates new scope.
  • This directive executes at priority level 400.

Animations

  • enter - animation is used to bring new content into the browser.
  • leave - animation is used to animate existing content away.
  • The enter and leave animation occur concurrently.
Click here to learn more about the steps involved in the animation.

Parameters

ParamTypeDetails
ngInclude|srcstring

angular expression evaluating to URL. If the source is a string constant, make sure you wrap it in quotes, e.g. src="'myPartialTemplate.html'".

onload
(optional)
string

Expression to evaluate when a new partial is loaded.

autoscroll
(optional)
string

Whether ngInclude should call $anchorScroll to scroll the viewport after the content is loaded.

  • 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.

Events

Example

Source













Demo