정의 된 문자열에 자체 태그 이름을 설정하는 AngularJS 지시문

Question

(레벨을 전달하는 중첩 템플릿의 경우) 속성으로 레벨을 전달할 수있는 <h1>과 같은 태그를 갖고 싶습니다. 당신은 당신은 지시에 템플릿을 설정할 수 있습니다 http://plnkr.co/edit/tt1oJySS4j0FmamEYBEr?p=preview

Answer 1

에서 볼 수 있듯이 예상대로이 방식이 작동하지 않습니다

.directive('hx', function() { 
    return { 
    restrict: 'E', transclude: true, replace: true, 
    link: function(scope, element, attrs) { 
     this.template = '<h' + attrs.level + ' ng-transclude></h' + scope.level + '>' 
    } 
    } 
}) 

:

이처럼 보일 수 있습니다. 링크 기능이 실행될 때마다 템플리트가 변경됩니다. 코드의 첫 번째 <hx> 요소에 템플릿이 없으므로 아무 것도 나타나지 않습니다. 두 번째는 첫 번째 (h1)의 템플릿을 사용하고 세 번째는 두 번째 (h1)의 템플릿을 사용합니다.

대신 지시에 대한 transclude 기능을 사용하려면 : 이것은 당신이 clone의 매개자의 콘텐츠에 액세스 할 수 있습니다

link: function(scope, element, attrs, ctrl, transclude) { 
    transclude(scope, function (clone) { 
    const header = angular.element('<h' + attrs.level + '></h' + attrs.level + '>'); 
    header.append(clone); 
    element.append(header); 
    // element.replaceWith(header); // variant replace=true 
    }); 
} 

. 그런 다음 적절한 수준의 새 머리글 요소를 만들고 콘텐츠 (clone)를 추가 한 다음 해당 머리글 요소를 hx에 추가합니다.

http://plnkr.co/edit/ED7NU8NmZ1g3G8efQNlu?p=preview