Angular.js Personal understanding of compile pre link post link option in

Time:2020-11-15

The life cycle of angularjs

In the life cycle of angularjs, it is divided intocompileandlinkTwo stages.

  • In the compilation phase, each instruction may have another instruction. Angularjs traverses them to form a template tree, and then returns a template function. However, the DOM is not formed before the template function returns, so the ng repeat instruction will take effect.
    After the compilation is completed, it will return a compilation function, which will return a template function that combines all sub instruction templates together and hand it to the link phase.

  • In the linking phase, we can link the scope and DOM, and link the template instance of each function or register the listener.

The three options in this phase compile pre link post link

These three instructions are not fully available, especially compile, which is not frequently used in practice. But understanding the working mechanism of these three instructions is very important for us to understand the life cycle and operation process of angluarjs.

First, take a look at compile

Compile means that we want instructions and data to operate on the DOM before they are put into the DOM, because we know from the last life cycle that although our DOM is generated before there is no link, we can modify the DOM, such as adding or deleting nodes. But we don’t recommend it.

The compile instruction can return an object or function. Here we can use the DOM operation element of angular to implement it

angular.module('myApp',[])
.directive('myDirective',function(){
    return{
        compile:function(tEle,tAttrs,transcludeFn){
            //DOM operation is performed here
            return function(scope,ele,attrs){
            //Link the link function here
            }
        }
    }
});
  • Note that as long as the compile option is used, the default mutex link option will be overridden.

  • In addition, the function in the compile option uses tall and tatts. This is because there is no instantiated template operated here, and there is no link here, so there is no scope and instance.

Let’s take a look at link

Link means that we link the scope and DOM after the compile is executed. Generally, we refer to the link as postlink, because if you write the link instruction directly, it will become postlink by default.

Usage of postlink

Postlink is one of the most frequently used options. Of course, by default, we only write link, which means postlink. It can link scopes and write business and logic code for us.

Usage of prelink

Prelink should be the most difficult option for us to understand angular. Prelink will be executed before postlink, and it will be executed after compile. In prelink, we write the business code after the compile DOM operation, but it is executed in the postlink.

Example code:

angular.module('myApp',[])
.directive('myDirective',function(){
    return{
        compile:function(tEle,tAttrs,transcludeFn){
            //DOM operation is performed here
            return {
              pre: function(scope, iElem, iAttrs){
                console.log(name + ': pre link => ' + iElem.html());
              },
              post: function(scope, iElem, iAttrs){
                console.log(name + ': post link => ' + iElem.html());
              }
            }
        }
    }
});

Sequence of compile pre link post link execution

First of all, compile and pre link are executed in this way. Post link will not execute until they are finished. If there are multiple nested instruction elements, compile and pre link will execute in turn, and postlink will not execute until they are executed.
Moreover, the pre link will be executed in reverse, from the inside to the outside to ensure the execution order.

Angular.js Personal understanding of compile pre link post link option in

The article of Jingxian is quoted here

Parameter parsing of passed in compile pre link post link

When compile runs, our DOM will also be modified, so the parameters here are all templates, such as TLE tattrs
When entering the link, the parameter passed in by pre link is still TLE tattrs, because it is still before the link
Of course, the scopes and elements passed in by Pros link are instances. We use ielement iattrs scope. If there is a need to introduce a new scope, we will have one more parameter of controller pointing to the introduced controller.