对AngularJS的编译和链接过程讲解一步到 4000 位的文章

内容摘抄于

http://stackoverflow.com/questions/12164138/what-is-the-difference-between-compile-and-link-function-in-angularjs

At the heart Angular framework is a parser. A parser which parses the Angular directives and render’s HTML output.

Angular parser works in 3 steps:-

Step 1:- HTML browser parses the HTML and creates a DOM (Document Object Model).

Step 2:- Angular framework runs over this DOM looks at the Angular directives and manipulates the DOM accordingly.

Step 3:- This manipulated is then rendered as HTML in the browser.





Now the above angular parsing is not so simple as it looks to be. It occurs in two phases “Compile” and “Link”. First the compile phase occurs then the link phase.





In compile phase the angular parser starts parsing the DOM and whenever the parser encounters a directive it create a function. These functions are termed as template or compiled functions. In this phase
we do not have access to the $scope data.

In the link phase the data i.e. ($scope) is attached to the template function and executed to get the final HTML output.