Home > Article > Web Front-end > 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 the angular directive. 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:
angular
Through this directive.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:
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 packaging directive = { 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'); } });
In order to see the order of angular compilation and link instructions clearly, use the following code to output the log Description:
<body ng-app="myApp"> <A a1> <B b1 b2></B> <C> <E e1></E> <F> <G></G> </F> </C> <D d1></D> </A> </body> 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, the sub-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.
<body ng-app="myApp"> <my-parent></my-parent> </body> var app = angular.module('myApp', []); app.directive('myParent', function () { return { restrict: 'EA', template: '<div>{{greeting}}{{name}}'+ '<my-child></my-child>'+ '</div>', link: function(scope,elem,attr){ scope.name = 'Lovesueee'; scope.greeting = 'Hey, I am '; } }; }); app.directive('myChild', function () { return { restrict: 'EA', template: '<div>{{says}}</div>', 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!