Javascript（Angular）$ compileのためにネストされたディレクティブを2回ロードする

Question

ディレクティブ内にディレクティブがネストされています。私たちのデザイナーのニーズを満たすためには、コンテンツをDOMノードの直接の子にする必要があります。

<div> 
    <my-directive style="color: blue;"> 

     <p>Name: {{ ctl_a.fname }} {{ ctl_a.sname }}</p> 
     <p>External Test: {{ xternal }}</p> 

     <div> 
     <nested-directive incoming="ctl_a.a_counter"></nested-directive> 
     </div> 

    </my-directive> 
    </div> 

これを正しくロードするための最良の選択肢は何ですか？ I.E "my-directive"はctl_a.fnameにアクセスでき、 "nested-directive"は "ctl_a.a_counter"によって引き渡された引数として$ scope.incomingにアクセスできます。

Here is a plunkこれは、私が$ compileを使用している問題を示しています。 $ compileを使用すると、ネストされたディレクティブは2回実行されます。外部ディレクティブをコンパイルするために1回、手動のコンパイルのためにもう一度コンパイルします。ひょっとすると、内容が正しく表示されるように見えるのは、手動のものだけです。

ng-transcludeを使用した場合、ng-transcludeは新しいスコープを作成するように見えるため、$$ prevSiblingまたは$ parentのプレフィックスを付けずに内部ディレクティブに渡される属性はありません。これは基本的にそれを参照するのが間違っているようです。

編集：ここはanother plunkで、最初のものをフォークします。今回は、ng-transcludeのデモンストレーションを行い、$ parentを使用して指令にコントローラにアクセスする必要があります。

ありがとうございました。

Answer 1

作業

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

私はそれはあなたが知りたい、しかし、あなたはあなたのディレクティブ定義オブジェクトにterminal: trueを追加する必要がすべてだかはわかりません。これにより、Angularは自分でコンパイルするまでmy-directiveタグ内のHTMLを処理できなくなります。あなたのプランナーからの変更されたコード：

function myDirective($compile) { 
    var directive = { 
     compile: compile, 
     controller: controller, 
     controllerAs: 'ctl_a', 
     replace: true, 
     terminal:true, //<======= 
     restrict: 'E', 
     scope: { 
      data: '=' 
     } 
    }; 

    return directive; 

Answer 2

my-directiveのデータプロパティを使用していないようです。 my-directiveから以下のコードを削除することができます。

scope:{ 
     data: '=' 
    } 

これで、以下のように手動でコンパイルする必要はありません。それもそれを削除します。 plunkr