Previous Article: Angular Study Notes (30)-Instructions (7)-compile and link (1)
In the previous article, we talked about the basic concepts of the compile function. Next we will explain in detail the execution sequence of compile and link.
Take a look at the code of nesting three commands:
HTML:
<body> <div ng-controller="compileCtrl"> <level-one> <level-two> <level-three> hello,{{name}} </level-three> </level-two> </level-one> </div></body>
JS:
/* Ipv8.2 command-compile and link */var appmodule = Angular. Module ('dirappmodule ', []);
Appmodule. Controller ('compilectrl ', function ($ scope ){
$ Scope. Name = "code_bunny"
});
appModule.directive(‘levelOne‘,function(){ return { restrict:‘E‘, compile:function(tEle,tAttrs,trans){ console.log(‘compile→‘+‘levelOne‘); return { pre:function(){ console.log(‘pre→‘+‘levelOne‘) }, post:function(){ console.log(‘post→‘+‘levelOne‘) } } } }});appModule.directive(‘levelTwo‘,function(){ return { restrict:‘E‘, compile:function(tEle,tAttrs,trans){ console.log(‘compile→‘+‘levelTwo‘); return { pre:function(){ console.log(‘pre→‘+‘levelTwo‘) }, post:function(){ console.log(‘post→‘+‘levelTwo‘) } } } }});appModule.directive(‘levelThree‘,function(){ return { restrict:‘E‘, compile:function(tEle,tAttrs,trans){ console.log(‘compile→‘+‘levelThree‘); return { pre:function(){ console.log(‘pre→‘+‘levelThree‘) }, post:function(){ console.log(‘post→‘+‘levelThree‘) } } } }});
Expected result:
Therefore, their execution order is as follows:
1. The compile function that executes commands from the outer layer to the inner layer
2. The pre-link function that executes commands from the outer layer to the inner layer after compile is executed.
3. The post-link function that executes commands from the inner layer to the outer layer after all pre-links are executed.
Code test address: http://jsfiddle.net/9hoqvtja/1/
Then, modify the JS Code as follows:
/* Ipv8.2 command-compile and link */appmodule. directive ('levelone', function () {return {restrict: 'E', scope: True, compile: function (tele, tattrs, trans) {lele.log('compile}'{'levelone'{tele.html ()); return {pre: function (scope, iele, iattrs) {console.log('pre}'levelone'{iele.html ()}, post: function (scope, iele, iattrs) {lele.log('postpolic'{'levelone'{iele.html () }}}); appmodule. directive ('veltwo', function () {return {restrict: 'E', scope: True, compile: function (tele, tattrs, trans) {lele.log('compile}'{'leveltwo'{tele.html ()); return {pre: function (scope, iele, iattrs) {console.log('pre}'leveltwo'{iele.html ()}, post: function (scope, iele, iattrs) {lele.log('postpolic'{'leveltwo'{iele.html () }}}); appmodule. directive ('levelthree ', function () {return {restrict: 'E', scope: True, compile: function (tele, tattrs, trans) {console.log('compile}'{'levelthree'{tele.html ()); return {pre: function (scope, iele, iattrs) {console.log('pre}'levelthree'{iele.html ()}, post: function (scope, iele, iattrs) {lele.log('postpolic'{'levelthree'{iele.html ())}}}}});
We add the scope attribute to the command and print the content of tele and iele during the printing process. The result is as follows:
We can see that the elements printed in the compile phase do not have the class attribute, but are printed in the pre-link and post-link phases, the class attribute is ng-scope ng-binding.
The reason is:
The elements obtained in the compile phase are telement, that is, templateelement, which is the original element.
In the link phase (whether pre-link or post-link), the obtained elements are ielement, instanceelement, and an instance of the elements compiled by compile.
So what is the difference between the original element and the element instance? My understanding (not necessarily true) Is that telement is the most primitive element, so we can say what HTML is written in the page, and what it is. ielement is compiled by angular. I don't know what he has done. But in this example, we can see that it processes at least 'Bind scope to the element ', 'Bind the data in the element to the Model in two-way ', of course, he must have handled many other things... that's why compile does not have the scope parameter, because it hasn't been compiled yet ~
Code test address: http://jsfiddle.net/0kgn110u/1/
To sum up all the knowledge just mentioned:
1. the execution sequence of the compile function is from the parent element to the child element. when the compile of a command is executed, the compile of its parent element has been executed. its tele parameter and tattrs parameter refer to the attributes of the original element and the original element. The original element has not been compiled by angular.
2. the execution sequence of the pre-link function is from the parent element to the child element. when the Pre-link of an instruction is executed, its parent element, its own compile function, and its parent element's pre-link function have been executed. its iele parameter and iattrs parameter refer to elements compiled by ng.
3. the execution sequence of the Post-link function is from the child element to the parent element. when a post-link command is executed, its parent element, its own compile function, and its sub-element's post-link function have been executed. its iele function and iattrs parameter refer to elements compiled by ng.
References: [translation] Analysis of compile and link functions in Ng commands
However, when there is a template (templateurl) in the command, the execution sequence of its compile and link is not like this. The next article will continue to explain this situation.
Angular Study Notes (30)-Instructions (7)-compile and link (2)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
