Mastering Web Application

Building Advanced Directives

For example, ng-repeat will transclude and clone its original element, stamping out
multiple copies of the transcluded element as it iterates over a list of items. Each of
these elements will be associated with a new scope, which is a child of the original
element's scope.

<ul>

<li ng-repeat=“item in items”>

{item name}

<li>

</ul>

<ul>

<li>

{{item.name}}

</li>

<li>

{{item.name}}

</li>

<li>

{{item.name}}

<li>

</ul>

repeated

element

repeated

element

repeated

element

transcludetransclude

Transcluding into an isolated scope directive

The ng-repeat directive is quite unusual in that it makes clones of itself, which are
then transcluded. It is more common to use transclusion when you are creating a
templated widget directive, where you want to insert the original element's contents
at some point in the template.

Creating an alert directive that uses

transclusion

A simple example of such a templated widget is an alert element directive.

Alerts are messages, which are displayed to the user to indicate the

current status of the application.

Oh snap! Something went wrong.

Well done! It worked out in the end.

Add Alert

+

+