재귀 각도 지시문 재귀는 지시문이 중첩된 요소를 생성할 수 있게 해주는 강력한 기술입니다. 그러나 Angular 지시문에서 재귀를 사용하면 몇 가지 문제가 발생합니다. 재귀 Angular 지시문에 대한 접근 방식 기존 솔루션은 두 가지 주요 방법으로 이 문제를 해결합니다. 수동 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>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
