search

Home >Web Front-end >JS Tutorial >Let's talk about the preLink and postLink functions in the angular directive

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

青灯夜游
青灯夜游forward
2021-05-19 10:08:012867browse

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.

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

[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 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:

  • 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 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');
  }
});

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: 

<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(&#39;myApp&#39;, []);
var names = [&#39;a1&#39;, &#39;b1&#39;, &#39;b2&#39;, &#39;e1&#39;, &#39;d1&#39;];
 
names.forEach(function (name) {
  app.directive(name, function () {
    return {
        compile: function () {
             console.log(name + &#39; compile&#39;);
            return {
                pre: function () {
                    console.log(name + &#39; preLink&#39;);
                },
                post: function () {
                    console.log(name + &#39; postLink&#39;);
                }
            };
        }
    };
  });
});

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(&#39;myApp&#39;, []);
 
app.directive(&#39;myParent&#39;, function () {
    return {
        restrict: &#39;EA&#39;,
        template: &#39;<div>{{greeting}}{{name}}&#39;+
        &#39;<my-child></my-child>&#39;+
        &#39;</div>&#39;,
        link: function(scope,elem,attr){
            scope.name = &#39;Lovesueee&#39;;
            scope.greeting = &#39;Hey, I am &#39;;
        }
    };
});
app.directive(&#39;myChild&#39;, function () {
    return {
        restrict: &#39;EA&#39;,
        template: &#39;<div>{{says}}</div>&#39;,
        link: function(scope,elem,attr){
            scope.says = &#39;Hey, I am child, and my parent is &#39; + 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!

angular undefined 对象 dom
Statement：
This article is reproduced at:csdn.net. If there is any infringement, please contact admin@php.cn delete
Previous article：A brief discussion on callbacks in NodejsNext article：A brief discussion on callbacks in Nodejs

Related articles

See more