Before the angularJs application starts, they are stored in the text editor as HTML text . When the application starts, it is compiled and linked, and the scope is bound to the HTML. This process consists of two stages!
compile phase
During the compilation phase, angularJs will traverse the entire document and process the instructions on the page according to the instructions defined in JavaScript. In the process of traversing, it is possible to traverse one layer on top of another. Once traversed and compiled, a function called a template function is returned. We can make changes to the compiled DOM tree before this function is returned. In general, if the compile function is set, it means that we want to perform DOM manipulations before the directives and live data are put into the DOM.
It is safe to perform DOM manipulations such as adding and removing nodes in this function. Essentially, when we set
the link option, we actually create a postLink() link function so that the compile() function can define the link function. The compile function (compile) is responsible for transforming the template DOM.
The link function (link) is responsible for linking the scope with the DOM.
1.compile
The compile option can return an object or a function.
The compile function itself is not often written, but the link function is often used. Please see the example below
We wrote a DIV tag that defines an attribute of auto hello with an attribute value of 5. We want to output "Hello Xiaoping" 5 times. We define a compile function, which performs some DOM operations. There is a small jq built in angularJs, so we can use the jq writing method to operate.
The page output is as follows:
At the end, a closure function is returned, which is actually what we call the link function. Usually, the compile function we define in this way is rarely used, and there are many ways to write it, because it is more complicated to write.
Some students are still curious, didn't you say that the last function returned is a link? Can I write multiple link functions? In order to satisfy the curiosity of our classmates, we can rewrite it like this
Then output: doesn't work! ! If both options are set,
the function returned by compile will be used as a link function, and the link option itself will be ignored.
What if we comment out the compile function? What will be the result?
The result is: this link works. because compile is commented out
Here's a little bit of clarification:
compile will call this method the first time the directive appears. This method will not be removed when it appears again (such as adding ng-if, ng-include, etc. after dom is removed)
And link will use this method again every time the directive appears (such as adding ng-if, ng-include, etc. after dom is removed).
Although in general, we don't use the compile method, but in some cases, in order to optimize the web page or some other requirements, we need to put some code into the compile.
So what content do we need to put in compile, and what content should we put in link?
There are other more detailed explanations here: http://www.jb51.net/article/58229.htm