# `ngInclude` (directive in module `ng` )

Improve this doc

## Description

Fetches, compiles and includes an external HTML fragment.

Keep in mind that Same Origin Policy applies to included resources (e.g. ngInclude won't work for cross-domain requests on all browsers and for file:// access on some browsers).

Additionally, you can also provide animations via the ngAnimate attribute to animate the enter and leave effects.

## Usage

This directive can be used as custom element, but we 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>

with animations

    //The enter and leave animations are supported
    <ANY ng-include="{string}"
         [onload="{string}"]
         [autoscroll="{string}"] ng-animate="{enter: 'enter-animation', leave: 'leave-animation'}">
       ...
    </ANY>

Click here to learn more about the steps involved in the animation.

### Directive info

- This directive creates new scope.

### Parameters

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

### Animations

- enter - happens just after the ngInclude contents change and a new DOM element is created and injected into the ngInclude container
- leave - happens just after the ngInclude contents change and just before the former contents are removed from the DOM

## Events

- ### $includeContentLoaded

  Emitted every time the ngInclude content is reloaded.

  #### Type:

  emit

  #### Target:

  the current ngInclude scope

## Example

#### Source

#### Demo