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

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

as element (see IE restrictions)

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

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

## Events

- ### $includeContentLoaded

  Emitted every time the ngInclude content is reloaded.

  #### Type:

  emit

  #### Target:

  the current ngInclude scope

## Example

#### Source

#### Demo