ホームページ > 記事 > ウェブフロントエンド > angular ディレクティブの preLink 関数と postLink 関数について話しましょう
angular ディレクティブの preLink 関数と postLink 関数について話しましょう
- 青灯夜游転載
- 2021-05-19 10:08:012837ブラウズ
この記事では、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('myDirective', function () {
return {
compile: function () {
return {
pre: function () {
console.log('preLink');
},
post: function () {
console.log('postLink');
}
}
}
}
});ディレクティブ ファクトリは関数を返します。その後、Angular はそのようなパッケージ化を使用します。directive = {compile: valueFn(directive) }、つまり、関数はディレクティブとして使用されます。 object postLink 関数は次のようになります:
app.directive('myDirective', function () {
return function () {
console.log('postLink');
}
});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('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');
}
};
}
};
});
});出力:
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('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;
}
};
});結果のサブコマンド出力は未定義ですHey, I am Lovesueee Hey, I am child, and my parent is undefined上記より、myParent ディレクティブのリンクは postLink 関数であり、この関数は、 myChild ディレクティブが実行されます。したがって、scope.name = 未定義になります。 プログラミング関連の知識について詳しくは、
プログラミング入門をご覧ください。 ！
以上がangular ディレクティブの preLink 関数と postLink 関数について話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。