独自のタグ名を定義された文字列に設定する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>要素にテンプレートがないため、何も表示されません。 2番目のテンプレートは最初のテンプレート（h1）を使用し、3番目のテンプレートは2番目のテンプレート（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