View source Improve this doc

# `ngInclude`
directive in module `ng`

## Description

Fetches, compiles and includes an external HTML fragment.

Keep in mind that:

- 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 and/or protocols, you may either either `whitelist them` or `wrap it` into a trusted value. Refer Angular's `Strict Contextual Escaping`.
- in addition, the browser's Same Origin Policy and Cross-Origin Resource Sharing (CORS) policy apply that may further restrict whether the template is successfully loaded. (e.g. 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.

### 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

Param | Type | Details
--- | --- | ---
ngInclude|src | string | 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

- ### $includeContentLoaded

  Emitted every time the ngInclude content is reloaded.

  #### Type:

  emit

  #### Target:

  the current ngInclude scope

- ### $includeContentRequested

  Emitted every time the ngInclude content is requested.

  #### Type:

  emit

  #### Target:

  the scope ngInclude was declared in

## Example

#### Source

## Demo