Lassen Sie uns über die Funktionen preLink und postLink in der Angular-Direktive sprechen-js-Tutorial-php.cn

Lassen Sie uns über die Funktionen preLink und postLink in der Angular-Direktive sprechen

青灯夜游

Freigeben： 2021-05-19 10:08:23

nach vorne

2861 Leute haben es durchsucht

In diesem Artikel werden Ihnen die Funktionen preLink und postLink im Befehl angular vorgestellt. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Lassen Sie uns über die Funktionen preLink und postLink in der Angular-Direktive sprechen

【Verwandte Empfehlung: „Angular Tutorial“】

Die Anweisungsvorlagenoption hat zwei Felder: Kompilieren und Verknüpfen. Es besteht die folgende Beziehung zwischen den beiden:

Wenn das Kompilierungsfeld vorhanden ist, ist der Link Wird das Feld ignoriert, wird der Rückgabewert der Kompilierungsfunktion als Linkfeld verwendet.
Wenn die Kompilierung nicht vorhanden ist und das Linkfeld vorhanden ist, angularDadurchdirective.compile = valueFn(directive.link);Umschließen Sie eine Ebene und verwenden Sie das benutzerdefinierte Linkfeld. angular通过这样directive.compile = valueFn(directive.link);包装一层，使用用户定义的link字段。

而link分为preLink和postLink两个阶段，从link字段或者compile函数的返回值来看：

如果是函数，那么这样的link，会被认为是postLink。
如果是对象，那么link.pre作为preLink函数，link.post作为postLink函数。

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

Nach dem Login kopieren

我们的指令工厂返回的是一个函数，那么angular通过这样的包装 directive = { compile: valueFn(directive) }，即该函数将作为指令对象的postLink函数，像这样：

app.directive(&#39;myDirective&#39;, function () {
  return function () {
    console.log(&#39;postLink&#39;);
  }
});

Nach dem Login kopieren

angular编译链接指令的顺序

为了看清angular编译链接指令的顺序，用以下代码输出日志的方式来说明：

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

Nach dem Login kopieren

输出：

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

Nach dem Login kopieren

可以看出：

所有的指令都是先compile，然后preLink，然后postLink。
节点指令的preLink是在所有子节点指令preLink，postLink之前，所以一般这里就可以通过scope给子节点传递一定的信息。
节点指令的postLink是在所有子节点指令preLink，postLink完毕之后，也就意味着，当父节点指令执行postLink时，子节点postLink已经都完成了，此时子dom树已经稳定
Wenn es sich um eine Funktion handelt, wird ein solcher Link als postLink betrachtet.

Wenn es sich um ein Objekt handelt, dient link.pre als preLink-Funktion und link.post als postLink-Funktion.

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

Nach dem Login kopieren

Unsere Anweisungsfabrik gibt eine Funktion zurück und umschließt sie dann wie folgt: directive = { compile: valueFn(directive) } , das heißt, diese Funktion wird wie folgt als PostLink-Funktion des Anweisungsobjekts verwendet:

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

Nach dem Login kopieren

Die Reihenfolge der Winkelkompilierungs- und Linkanweisungen

rrreee

Alle Anweisungen werden zuerst kompiliert, dann preLink, dann postLink.

Das obige ist der detaillierte Inhalt vonLassen Sie uns über die Funktionen preLink und postLink in der Angular-Direktive sprechen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!