About Angularjs (iv) CUSTOM command----(middle)

The previous article briefly introduced a few simple parameters for customizing an instruction, restrict, template, Templateurl, replace, transclude, which are relatively easy to understand because they involve only performance, not behavior. This article will continue to learn several of the heavyweight parameters of the NG Custom directive, and after knowing about them our custom directive will not only be able to "see" but also be able to "move". Start ~

Understanding Compile and link

I do not know whether we have such a feeling, the time to define their own instructions and write jquery plug-in a bit similar, are pre-defined page structure and listening function, and then call on an element, the element has a special function. The difference is that jquery focuses on DOM operations, and Ng's instructions are more about binding data and templates in addition to DOM operations. The jquery plug-in is initialized when it is called, and the NG instruction is initialized by the build service ($compile) when the page is loaded.

In the directive definition object, there are compile and link two parameters, what do they do? From a literal point of view, compiling, linking, seems too abstract. In fact, in order to use them correctly when customizing the instructions, it is now necessary to understand how NG compiles the instructions. I have a list of instructions on the execution process, but only column 1234 a bit too sorry to the audience, so in this detailed analysis. This knowledge point is quite important.

An explanation of the parsing process of instructions

We know that the NG framework will invoke the $compile service to compile according to the scoped scope of the Ng-app when the page is loaded, and this $compile, like a big manager, counts the DOM elements in the scope to see which elements are using the instructions (such as <div Ng-modle= "M" ></div>), or which element itself is an instruction (such as <mydierc></mydirec>), or uses an interpolation instruction ({{}} is also an instruction, called interpolation Directive), $compile the big manager will make a list of the inventory of the good, and then according to the priority of these instructions (priorities), is a careful big manager ha ~ The main manager will also be based on the configuration parameters in the directive ( Template,place,transclude, etc.) to convert the DOM, so that the command "first humanoid."

Then began to sequentially execute the compile function of each instruction, note here compile is not big $compile, people with $ is local tyrants, the compile function here is configured in our instruction, compile function can access to the DOM node and operation, The main function is to do DOM conversion, each compile function will return a link function, these link functions can be combined into a combination of a composite link function, in order to understand, we can think of it as the gourd of the small king, like the processing

// link function after the fit function AB () {  // child link function  // child link function }

Next into the link phase, the link function is executed. The so-called link is to link the view and scope. What's the link like? Is the familiar data binding that dynamically modifies the data in the scope by registering listeners on the DOM, or modifying the DOM with $watchs listening to variables in scope to establish a two-way binding. It can also be concluded that the Gourd King can access the scope and DOM nodes.

Don't forget that we also have a link parameter configured in the definition directive, so don't confuse it with so many link. What is this link function for, do we not have the gourd little king? Then I tell you, actually it is a small three. How do you say that? The Compile function returns the link function after execution, but if the compile function is not configured? The Little king of the gourd will not exist. The main house is not, of course, it is the turn to small three, big manager $compile the link function here to carry out. This means that the configured link function can also access the scope and DOM nodes. It is important to note that the compile function is usually not configured, because when we define a directive, most of the time the DOM operation is not done programmatically, but more is the registration of the listener and the binding of the data. Therefore, the small three justified by the great director of the favor ~

After listening to the story of the big manager, the gourd Little King Kong and the small three, do you have a clearer explanation of the instructions? But carefully, you may still feel the plot is blunt, some of the details seem to be not clear, so you also need to understand the following points of knowledge:

The difference between compile and link

In fact, after I have read the official document has been questioned, why the listener, data binding can not be placed in the compile function, but should be placed in the link function? Why do we need link for compile? Just as you questioned my story, why did the last small three be spoiled? So we need to explore what the difference is between compile and link. OK, the PK of the first and small three now begins.

The first is performance. As an example:

< ul >  <  ng-repeat= "A in array">    <ng-modle  />  </li></ul >

Our observation target is the ng-repeat directive. Suppose a precondition is that there is no link. Big Explorer $compile When compiling this code, it looks for ng-repeat, then executes its compile function, and the compile function copies n <li> tags based on the length of the array. There are also <input> nodes in the copied <li> node and the ng-modle instruction is used, so compile also scans it and matches the instructions, then binds the listener. Every cycle does so much work. And the worse thing is, we will add elements to the array in the program, the page will be updated in real-time DOM, each time a new element comes in, compile function to go through the above steps again, it is not to be exhausted, so performance must not be.

Now throw away that hypothesis, at compile time compile just build dom thing, encounter need to bind the listener place first save, have several save several, finally summarize them into a link function, then execute together. This is much easier, compile only need to perform once, the performance naturally improve.

Another difference is the ability. Although compile and link are doing the same thing, their capabilities are not the same. For example, the small three can control your deposit. Small three can give you the feeling of first love, but can't.

We need to look at the definition of the compile function and the link function:

function Compile (telement, Tattrs, transclude) {...} function Link (scope, ielement, Iattrs, controller) {...}   

These parameters are obtained through dependency injection and can be used on an as-needed basis. From the name it is also easy to see, two functions of their respective responsibilities, compile can get transclude, allowing you to program yourself to manage the big moved behavior. and link can get scope and controller, can be data binding with scope, and other instructions to communicate. Although both can get the element, but there is a difference, see their respective prefixes it? Compile got the pre-compilation, is from the template, and link to get is compiled, has been associated with the scope, which is the link can be data binding reasons.

The difference between the main and small three is the performance and ability of two keywords, précis-writers for sexual ability, I think you will never forget it, the truth is so naked ah ~ haha

I can only understand this level for the time being. Do not want to understand this knowledge, as long as the simple to remember a principle: If the instruction is only to modify the DOM, not data binding, then configured in the Compile function, if the instruction to be data binding, then configured in the link function .

The end of the helpless

It took me a lot of time to understand the process of instruction and the difference between compile and link. Too little information, official documents over and over, and finally understand the extent, but always feel a little bit worse, no 100% understanding in place. Today is too sleepy, to record here, and later with a new understanding to do the supplement.

In fact, the title of this article I want to write (under), directly to the scope, require, controller together, now it seems impossible, because these parameters also need to focus on understanding, so that the space and hold on. It's a good forecast here. I'm so embarrassed ... Previously felt that no drawings and code samples of the blog is not a good blog, but now think that to code out so many words, but also need to work hard.

Source: http://www.cnblogs.com/lvdabao/p/3398044.html

Null

About Angularjs (iv) CUSTOM command----(middle)