クリック時に別のカスタムディレクティブの中にカスタムディレクティブを追加する方法

Question

ボタンで構成されるカスタムディレクティブがあります このボタンをクリックすると、カスタムディレクティブとして既に定義されている行全体を追加します。それ自体はここ

はHTML

<tbody> 
       <tr> 
        <row-creator></row-creator> 
       </tr> 
      </tbody> 

ここでは、しかし、ボタン

app.directive('rowCreator', function() { 
return { 
    restrict: "AE", 
    template: "<button>Add Row</button>", 
    link: function(scope, element, attrs){ 
     element.bind('click', function(){ 
      element.append(<exception-row></exception-row>); 
      console.log('appended'); 
     }) 

    } 
}}); 

ためのディレクティブの宣言であると呼ばれます私が<exception-row>を、<p>this is some text</p>のような角度解釈を必要としない要素に置き換えると、うまく機能します。それで私はそれが多分コンパイルと関係があると思うが、私はそれをやることができない何時間も試みてきた。

Answer 1

$compileを使用してHTMLをコンパイルする必要があります。 "AE"：

$compile(element.contents())(scope); 

Answer 2

使用テンプレート：

app.directive('rowCreator', function() { 
return { 
    restrict: "AE", 
    scope: {}, 
    template: "<button ng-click="addRow()">Add Row</button><exception-row ng-repeat="row in rows track by $index"></exception-row>", 
    link: function(scope, element, attrs) { 
     scope.rows = []; 
     scope.addRow = function() { 
      $scope.rows.push($scope.rows.length); // or whatever else you want 
     }; 
    } 
}});