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

内容摘抄于

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.

enter image description here

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.

enter image description here

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.

enter image description here