ANGULARJS Directive (Directive) detailed (2)

Original address

We talked about transclude, so we're going to go on with the following.

9.scope

Optional parameter, the default value is False. Value:

False-The new scope is not created in this directive, but the scope of the parent is inherited.

True-Creates a new scope for this directive and inherits the scope of its parent.

{}-object, create a new, isolated scope in this directive, which prevents reading or modifying the data of the parent scope, creating reusable components that all depend on this.

How is the value in the object bound to the scope of the parent? The following properties are passed:

(1) [email protected] or @attr-if you do not specify a attr name (that is, write @ only), attr is the same as the name defined in directive. Can only be of type string, and one-way binding to the parent scope, that is, inherit with the parent scope, but change the value of the corresponding scope in directive, the parent scope will not change.

(2). = or =attr-if no attr name is specified (that is, write-only =), attr is the same as the name defined in directive. A two-way binding to the scope of the parent, which changes one of the values, and the other changes accordingly.

(3) .& or &attr-if you do not specify a attr name (that is, write & only), attr is the same as the name defined in directive. What do we do when we want to call a parent function in a child scope in directive? ' & ' is used to solve this problem. It provides a way to perform a function in the parent scope, and allows the parent function to obtain the corresponding data through LOCALFN ({args1: ', Args2: '}).

10.controller

Optional parameters. The controller is initialized before the pre-linking step and can be accessed through other directive (see require for details). The controller can be injected, and the following behavior is injected by default:

$scope-scope of the current directive element

$element-Elements of the current directive

$attrs-An object that consists of the properties of the current element

$transclude-Implement transclude in the controller, here is the parameter explanation

function([scope], clonelinkingfn, futureparentelement, slotname):

(1). Scope: (optional parameter) scope of the current directive element

(2). CLONELINKINGFN: (optional parameter) clone the contents of the current reference

(3). Futureparentelement: (optional parameter)

(4). Slotname: (optional parameter) the name of the transclude.

11.require

Optional parameters. Request another directive controller to pass in the linking function of the current directive. Require need to pass in the name of a directive controller. If the controller is not found for this name, an error will be thrown. The name can include the following prefixes:

(without prefix)-finds the desired controller on the current element.
? -try to find the desired controller.
^-Find the desired controller by searching for the element and its parent. Throws an error if it is not found.
^^-Find the desired controller by searching the parent of the element. Throws an error if it is not found.
? ^-try to find the desired controller by searching for the element and its parent.
? ^^-Try to find the desired controller by searching the parent of the element.

12.controllerAs

Optional parameters. Set the alias of your controller

13.compile

Compile compile function options

The compile option can return an object or function

Here we can do DOM operations before the instruction and real-time data are put into the DOM,

For example, we can do this here to add or remove the DOM of the node.

So the compilation function is responsible for converting the DOM of the template, and will only run once.

Syntax of the compile function compile:function compile (telement,tattrs,transclude) {return{pre:function prelink (scope,ielemen T,iattrs,controller) {}, Post:function Postlink (Scope,ielement,iattrs,controller) {}}}

For most of the instructions we write, we do not need to convert the template, so most of the situation is as long as you write the link function.

The Tips:prelink function executes after the compilation phase, before the instruction is linked to the child element.

Similarly, Postlink executes after the instruction is linked to a child element

This means that, in order not to break the binding process, if you need to modify the DOM structure, you should do it in the Postlink function.

14.link Link Function options

The link function is responsible for linking the scope and the DOM.

Link linking function link:function postlink (scope,ielement,iattrs) {}

If the Require option is defined in the directive, the link function will have a fourth parameter, a controller that represents the controller or the instruction on which it is dependent (example of the Require option above)

ANGULARJS Directive (Directive) detailed (2)