ANGULARJS Directive Custom Instructions

Function: Need to use directive to have the following scenario:

1. Make your HTML more semantic, without needing to drill down into the code and logic to know the approximate logic of the page.
2. Abstract a custom component and reuse it elsewhere.

3. Use common code, reduce re-use, reduce duplication of code,

Properties of the directive:

The scope of the study:

3 kinds of values for the scope property:

1.false (default) when using false to understand that there is no new scope within the directive, it shares the same scope with code other than the instruction, that is, the scope in the instruction is the same as the $scope in the controller,----------inheritance is not isolated.

2.true when using ture, it can be understood that all scopes within the directive inherit from the outside parent scope, but the change in the value inside the instruction does not affect the external value. -------------Inheritance Isolation

3. {}

To create a new "quarantine" scope, there are three types of binding strategies:
@: One-way binding, the external scope can affect the internal scope, but the reverse is not true, the value of the single-binding must be used {{}}

=: two-way binding, external scope and internal scope model can change each other, the value of double binding with "" can

&: Binds the return value of the function of the internal scope to any property of the external scope, generally using ""

See details: 52213103;

Restrict properties:

Desirable value: 1. E (Element) Label shape

2.A (Attrute) attribute shape

3.C (Class) type

4. M Comment Annotation Type

Template property:

The template is the instruction link DOM templates, which are generally HTML code.

Templaturl Properties:

Templateurl is an inline template that specifies a string, which is not used if you specify that the template is a URL. is typically specified as another page template.

Replace Property:

When true: indicates that the link template replaces the original element, that is, the content of the template replaces the original page.

When false: indicates that the link template does not replace the original element, that is, the contents of the template do not replace the original page.

Regular and transclude: boolean use

Link attribute: Pending study.

ANGULARJS Directive Custom Instructions