View source Improve this doc

ngInclude
directive in module ng

Description

Fetches, compiles and includes an external HTML fragment.

Keep in mind that:

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

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