Mastering Web Application

Chapter 9

Accessing the transclusion function

As described in the section on transclusion functions, directive controllers can be
injected with a $transclusion function, which is already bound to the correct scope.

Link functions can only access a transclusion function via the closure of a compile
function, and this function is not pre-bound to a scope.

Creating an accordion directive suite

Directive controllers attach behavior to a directive's element, which can then be
required by other directives. This lets us build suites of cooperating directives that
can communicate and work together.

In this section we will look at how to implement an accordion widget. An
accordion widget is a list of collapsible groups of content, with clickable headers.
Clicking on the header of a group expands it and causes the other groups to collapse.

Collapsible Group Item #1

Anim pariatur cliche reprehenderit, enim eiusmod high life

non cupidatat skateboard dolor brunch. Food truck quinoa

aliqua put a bird on it squid single-origin coffee nulla

wes anderson cred nesiunt sapiente ea proident.Ad

to-table, raw denim aesthetic synth nesciunt you probably

Collapsible Group Item #2

Collapsible Group Item #3

The HTML when using the accordion looks like this:

<accordion>

<accordion-group heading="Heading 1">

Group 1 <strong>Body</strong>

</accordion-group>

<accordion-group heading="Heading 2">

Group 2 <strong>Body</strong>

</accordion-group>

</accordion>

Here we have two new element directives: accordion, which is a container for the
groups, and accordion-group, which specifies the content of each group.