Mastering Web Application

Building Advanced Directives

In contrast, the transcluded contents of the original element, Look
at {{type}}, are now bound to a new transclude scope. If we had naïvely
moved these contents into the template, their implicit scope binding would change
from $rootScope to the isolated scope and then {{type}} would evaluate to
'info'. This is not what we want.

Instead, the new transclude scope is a child of $rootScope and prototypically
inherits from it. This means that the span will evaluate correctly to Look
at success. The following image shows these scopes in Batarang:

Scope(002)|scopes|models

type: success

Scope (003)|models

type: info

close: null

Scope (004)|models

In the previous image, Scope (002) is the $rootScope, which contains the
type="success". Scope (003) is the isolated scope for the alert template
and does not inherit from $rootScope. Scope (004) is the transcluded scope and
does inherit from $rootScope and so in this scope, type will be success.

When elements are moved by transclusion they get to take their original

scope binding with them. More accurately, the transcluded elements

will be bound to a new scope that is a prototypical child of the scope

from where they were taken.

Creating and working with transclusion functions

Transclusion in AngularJS is made possible by the use of transclusion functions.
These functions are simply link functions, which are created by calling the
$compile service.