Directive definition Object--advanced stage

Directive Definition Object

Each directive defines the factory function, which needs to return a directive definition object, which the compiler/$compile expands upon at compile time according to the definition object.

The common properties of the directive definition object are as follows:

• Link

The link function is responsible for implementing data binding for the DOM and scope, typically performing DOM event monitoring and data change monitoring in link. The link function is called after the template executes. Link is the most commonly used attribute, and the logic of an instruction is usually implemented in the link function.

The link function is in the following form:

1. function link(scope,ielement,iattrs,controller,transcludefn ){...}

• Restrict

This can be any combination of the four letters of the EACM, used to limit the application of the instruction. If you do not specify this property, by default, directives are only allowed to be used as element and attribute names:

2. * E - element name, e.g.:<my-directive></My-directive>
4. * A - attribute name, for example:<div my-directive="exp"></Div >
6. * C - class, for example:<div class="MY-DIRECTIVE:EXP;" ></div>
8. * M - note, e.g.:<!-- directive:My-directive exp --and

• Template

The template is an HTML fragment that can be used to:

1. * Replace the contents of the instruction. This is the default behavior and can be changed using the Replace property.
2. * Replace the instruction itself ( if the Replace property is set to TRUE ).
3. * the contents of the package instruction (if the transclue property is set to TRUE ).

• Replace

Indicates whether to replace the instruction element with a template.

1. * true - when compiling, a template is used to replace the instruction element
2. * false - when compiling, the contents of the instruction element will be replaced with the template

Directive definition Object--advanced stage