Let’s talk about the preLink and postLink functions in the angular directive

This article will introduce to you the preLink and postLink functions in theangulardirective. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

[Related recommendation: "angular tutorial"]

The directive template option has two fields: complie and link. There is the following relationship:

• When the compile field exists, the link field will be ignored, and the return value of the compile function will be used as the link field.
  
• When compile does not exist and the link field exists,angularThrough thisdirective.compile = valueFn(directive.link);Wrap one layer, use User-defined link field.
  

The link is divided into two stages: preLink and postLink. Judging from the link field or the return value of the compile function:

• If it is a function, then this The link will be considered as postLink.
  
• If it is an object, then link.pre serves as the preLink function and link.post serves as the postLink function.

app.directive('myDirective', function () { return { compile: function () { return { pre: function () { console.log('preLink'); }, post: function () { console.log('postLink'); } } } } });

Our directive factory returns a function, then angular uses such packagingdirective = { compile: valueFn(directive) }, that is, the function will be used as the directive object The postLink function, like this:

app.directive('myDirective', function () { return function () { console.log('postLink'); } });

The order of angular compilation and link instructions

In order to see the order of angular compilation and link instructions clearly, use the following code to output the log Description:

            var app = angular.module('myApp', []); var names = ['a1', 'b1', 'b2', 'e1', 'd1']; names.forEach(function (name) { app.directive(name, function () { return { compile: function () { console.log(name + ' compile'); return { pre: function () { console.log(name + ' preLink'); }, post: function () { console.log(name + ' postLink'); } }; } }; }); });

Output:

a1 compile b1 compile b2 compile e1 compile d1 compile a1 preLink b1 preLink b2 preLink b2 postLink b1 postLink e1 preLink e1 postLink d1 preLink d1 postLink a1 postLink

It can be seen that:

• All instructions are compile first, then preLink, and then postLink.
  

• The preLink of the node instruction is before the preLink and postLink instructions of all child nodes, so generally, certain information can be passed to the child nodes through the scope.
  

• The postLink of the node instruction is after all child node instructions preLink and postLink are completed, which means that when the parent node instruction executes postLink, the child node postLink has been completed. At this time, thesub-dom tree has stabilized, so most of our dom operations and access to child nodes are at this stage.
  

• #The process of the link instruction is actually a depth-first traversal process, and the execution of postLink is actually a backtracking process.
  

• There may be several instructions on the node. When collecting, they will be arranged in a certain order (sorted by byPriority). When executed, preLinks is executed in normal order, while postLinks It is executed in reverse order.
  

After understanding this, you must be careful of some easily overlooked traps.

   var app = angular.module('myApp', []); app.directive('myParent', function () { return { restrict: 'EA', template: '
{{greeting}}{{name}}'+ ''+ '
', link: function(scope,elem,attr){ scope.name = 'Lovesueee'; scope.greeting = 'Hey, I am '; } }; }); app.directive('myChild', function () { return { restrict: 'EA', template: '
{{says}}
', link: function(scope,elem,attr){ scope.says = 'Hey, I am child, and my parent is ' + scope.name; } }; });

The result sub-command output is undefined

Hey, I am Lovesueee Hey, I am child, and my parent is undefined

From the above, the link of the myParent directive is a postLink function, and this function will be executed after the preLink and postLink of the myChild directive are executed. So scope.name = undefined.

For more programming-related knowledge, please visit:Introduction to Programming! !

The above is the detailed content of Let’s talk about the preLink and postLink functions in the angular directive. For more information, please follow other related articles on the PHP Chinese website!