再帰的 Angular ディレクティブ 再帰は、ディレクティブでネストされた要素を作成できる強力な手法です。ただし、Angular ディレクティブで再帰を使用すると、いくつかの課題が生じます。 再帰的 Angular ディレクティブへのアプローチ 既存のソリューションは、次の 2 つの主な方法でこの問題に対処しています。 手動 HTML コンパイル:このアプローチには、実行時のスコープの状態に基づいて HTML を手動でコンパイルすることが含まれます。ただし、コンパイル プロセスを細心の注意を払って管理するという課題が生じます。 スクリプト テンプレート: このアプローチでは、ディレクティブの使用を回避し、代わりに を利用します。それ自体を参照するテンプレート。ただし、ディレクティブのパラメータ化機能が欠けており、新しいコントローラ インスタンスに厳密にバインドされます。</li> </ol> <p><strong>パラメータ化された再帰パターン</strong></p> <p>既存のアプローチの制限に対処するには、パラメータ化された再帰パターンは、 service.</p> <p><strong>RecursionHelper サービス</strong></p> <p>RecursionHelper サービスは、再帰を処理するコンパイル関数を提供します。要素とリンク関数 (または登録されたプレリンク関数とポストリンク関数を持つオブジェクト) を受け入れます。</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>module.factory('RecursionHelper', ['$compile', function($compile) { return { compile: function(element, link) { // Remove element contents to break recursion var contents = element.contents().remove(); return { pre: link.pre || null, post: function(scope, element) { // Compile and re-add contents var compiledContents = $compile(contents); compiledContents(scope, function(clone) { element.append(clone); }); // Call post-linking function, if any link.post && link.post.apply(null, arguments); } }; } }; }]);</pre><div class="contentsignin">ログイン後にコピー</div></div> <p><strong>RecursionHelper サービスの使用法</strong></p> <p>RecursionHelperサービスは次のようにディレクティブに組み込まれます</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>module.directive("tree", ["RecursionHelper", function(RecursionHelper) { return { restrict: "E", scope: {family: '='}, template: ` <p>{{ family.name }}</p> <ul> <li ng-repeat="child in family.children"> <tree family="child"></tree> </li> </ul> `, compile: function(element) { return RecursionHelper.compile(element); } }; }]);</pre><div class="contentsignin">ログイン後にコピー</div></div> <p><strong>このアプローチの利点</strong></p> <ul> <li>不要なディレクティブを回避することで HTML のクリーンさを維持します。</li> <li>再帰ロジックを抽象化します。サービス、強化されたディレクティブ</li> </ul> <p><strong>Angular 1.5 の互換性</strong></p> <p>Angular 1.5.x 以降では、RecursionHelper サービスを使用せずに再帰を直接実装できますが、テンプレートを使用した場合のみ実装できます。 templateUrl を使用します。</p>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
