Building Advanced Directives

The previous chapter introduced how to develop and test your own custom
directives. In this chapter we look at some of the more advanced things that you
can do when developing AngularJS directives. This will include:

• Understanding transclusion: in particular use of transclusion functions and
  transclusion scopes


• Define your own directive controllers to create directives that can cooperate,
  and how these controllers differ from link functions


• Terminating the compilation process and taking control: loading your own
  templates dynamically and using the $compile and $interpolate services

Using transclusion

When you move elements from one part of the DOM to another, you have to decide
what happens to their associated scope.

The naïve approach is to associate the elements with the scope that is defined at
the new position. This is likely to break the application, since the elements may no
longer have access to items from their original scope.

What we really need is to "bring the original scope with us". Moving elements and
their scope in this way is called transclusion. We will look into how to move the
scope in transclusion later in this chapter in the Understanding transclusion scope
section. But first let's look at some examples.

Using transclusion in directives

Transclusion is necessary whenever a directive is replacing its original contents with
new elements but wants to use the original contents somewhere in the new elements.