Mastering Web Application

Chapter 8

This table describes all the fields that can be used in a directive definition:

Field Description

name The name of the directive.

restrict In what kind of mark-up this directive can appear.

priority Hint to the compiler of the order that directives should be

executed.

terminal Whether the compiler should continue compiling directives

below this.

link The link function that will link the directive to the scope.

template A string that will be used to generate mark-up for this directive.

templateUrl A URL where the template for this directive may be found.

replace Whether to replace this directive's element with what is in the

template.

transclude Whether to provide the contents of this directive's element for

use in the template and compile function.

scope Whether to create a new child scope or isolated scope for this

directive.

controller A function that will act as a directive controller for this directive.

require Requires a directive controller from another directive to be

injected into this directive's link function.

compile The compile function that can manipulate the source DOM and

will create the link function and is only used if a link has not

been provided above.

Most directives that you are likely to write will only need some of these fields. The rest
of this chapter will show various custom directives from our SCRUM application. For
each directive, we will look at the relevant parts of the directive definition.

Styling buttons with directives

We are using Bootstrap CSS styles for our application. This CSS library specifies
mark-up and CSS classes to ensure that buttons are styled correctly. For instance
a button might have mark-up of the form:

<button type="submit"

class="btn btn-primary btn-large">Click Me!</button>

Having to remember to apply these classes is error prone and time consuming.
We can build a directive to make this easier and more reliable.