angular ディレクティブの preLink 関数と postLink 関数について話しましょう-jsチュートリアル-php.cn

angular ディレクティブの preLink 関数と postLink 関数について話しましょう

青灯夜游

リリース： 2021-05-19 10:08:23

転載

2861 人が閲覧しました

この記事では、angular ディレクティブの preLink 関数と postLink 関数を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

angular ディレクティブの preLink 関数と postLink 関数について話しましょう

[関連する推奨事項: "angular チュートリアル "]

ディレクティブテンプレートオプションには、complie と link の 2 つのフィールドがあります。

コンパイルフィールドが存在する場合、リンクフィールドは無視され、コンパイル関数の戻り値がリンクフィールドとして使用されます。
コンパイルが存在せず、リンクフィールドが存在する場合、 angularこれを介して directive.compile = valueFn(directive.link);1 つのレイヤーをラップし、ユーザー定義のリンクフィールドを使用します。

リンクは preLink と postLink の 2 段階に分かれており、リンクフィールドやコンパイル関数の戻り値から判断すると、

関数の場合、このリンクは 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;);
              }
          }
      }
  }
});

ログイン後にコピー

ディレクティブファクトリは関数を返します。その後、Angular はそのようなパッケージ化を使用します。directive = {compile: valueFn(directive) }、つまり、関数はディレクティブとして使用されます。 object postLink 関数は次のようになります:

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

ログイン後にコピー

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

ログイン後にコピー

出力:

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

ログイン後にコピー

次のことがわかります:

すべての命令が最初にコンパイルされ、次にコンパイルされます。 preLink、postLinkの順です。
ノード命令の preLink は、すべての子ノードの preLink および postLink 命令の前にあるため、一般に、スコープを通じて特定の情報を子ノードに渡すことができます。
ノード命令の postLink は、すべての子ノード命令 preLink および postLink が完了した後です。つまり、親ノード命令が postLink を実行すると、子ノード postLink が完了します。現時点では、 サブ dom ツリー が安定しているため、ほとんどの dom 操作と子ノードへのアクセスはこの段階にあります。
#リンク命令の処理は実際には深さ優先のトラバーサル処理であり、postLink の実行は実際にはバックトラック処理です。
ノード上には複数の命令が存在する可能性があります。収集するとき、それらは特定の順序 (優先度でソート) に配置されます。実行されると、preLinks は通常の順序で実行されます。 , while postLinks 逆の順序で実行されます。

#これを理解した後は、見落とされやすいいくつかの罠に注意する必要があります。

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

ログイン後にコピー

結果のサブコマンド出力は未定義です

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

ログイン後にコピー

上記より、myParent ディレクティブのリンクは postLink 関数であり、この関数は、 myChild ディレクティブが実行されます。したがって、scope.name = 未定義になります。

プログラミング関連の知識について詳しくは、

プログラミング入門をご覧ください。！

以上がangular ディレクティブの preLink 関数と postLink 関数について話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。