Angular 지시문의 재귀 재귀 Angular 지시문은 두 가지 범주로 분류되는 솔루션과 함께 많은 논의를 불러일으켰습니다. 수동 HTML 컴파일 이 접근 방식에는 런타임 범위 상태를 기반으로 HTML을 점진적으로 구축하는 작업이 포함됩니다. 그러나 컴파일된 코드를 제거할 수 없고 컴파일 프로세스를 수동으로 관리해야 하는 복잡성이라는 문제가 있습니다. 스크립트 템플릿 이 방법은 자신을 참조하는 템플릿을 사용하여 지시어 제한을 효과적으로 피합니다. 그러나 매개변수화를 희생하고 새로운 컨트롤러 인스턴스에 바인딩됩니다.</p> <h3>정제된 솔루션: 재귀 도우미 서비스</h3> <p>기존 솔루션에서 영감을 받은 보다 우아한 접근 방식은 추상화하는 재귀 도우미 서비스를 만드는 것입니다. 재귀 기능. 작동 방식은 다음과 같습니다.</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>module.factory('RecursionHelper', ['$compile', function($compile){ return { compile: function(element, link){ var contents = element.contents().remove(); var compiledContents; return { pre: link && link.pre ? link.pre : null, post: function(scope, element){ if (!compiledContents) { compiledContents = $compile(contents); } compiledContents(scope, function(clone){ element.append(clone); }); if (link && link.post) { link.post.apply(null, arguments); } } }; } }; }]);</pre><div class="contentsignin">로그인 후 복사</div></div> <p>이 도우미 서비스를 사용하면 요소를 수동으로 컴파일하여 재귀 루프를 깨뜨릴 수 있습니다. 요소와 링크 함수를 매개변수로 사용하고 사전 및 사후 컴파일을 위한 연결 함수를 반환합니다.</p> <h3>사용</h3> <p>재귀 도우미 서비스는 다음과 같이 지시문에서 사용할 수 있습니다.</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> <h3>장점</h3> <p>이 솔루션은 이유:</p> <ul> <li>특수 지시문이 필요하지 않아 HTML 복잡성이 줄어듭니다.</li> <li>재귀 논리가 Recursion Helper 서비스에 캡슐화되어 지시문이 더 깔끔해집니다.</li> </ul> <h3>업데이트</h3> <p>Angular 1.5.x 이상의 경우, 재귀 지시문은 템플릿을 사용할 때 즉시 작동합니다. 그러나 템플릿 URL을 사용할 때는 여전히 Recursion Helper 서비스가 필요합니다.</p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
