Learning notes for child directives in Angularjs

The previous article I have briefly introduced the angular instructions, let's take a look.

Angular has a powerful function is the instruction, it can change the page DOM, like Ng-app, Ng-controller, Ng-click, etc. are instructions, we can also create their own instructions, as follows:

The effect is as follows:



Both ways can bind directives, create HTML tags directly and give tag properties, and click on newly created elements to perform bound events.

It is worth noting that the binding instructions can not be used to name the hump, to use the connector "-".


Angular can actually command set instructions, that is, in the instructions we create continue to add the instructions we want to meet our complex needs, first code:

<! doctype html> 

The effect chart is as follows:


The initial effect is this:



The effect of placing the mouse in three Div is this:




To analyze the code, we think of the command box as a parent instruction, in which there is a controller method body, the method in the controller method is open and can be invoked to invoke its instructions, and we write three functions to manipulate the DOM. In the following three subroutines, we first refer to the parent instruction, use require, and then use the link method to bind the event to the element, in which we can use the function defined in the parent instruction, noting that the fourth parameter of the link method is the Controller method body that points to the parent instruction.

The last point to note is that this should be a small hole in the angular, when we named the instructions, even if we use the code of the hump in the HTML, here are all lowercase, such as the above instructions Bigwidth, in the HTML used in the hump, in JS use is lowercase