Javascript (Angular) verschachtelte Direktive, die zweimal wegen $ kompiliert wird

Question

Ich habe eine Direktive geschachtelt innerhalb einer Direktive. Um die Bedürfnisse unserer Entwickler zu erfüllen, benötige ich die Inhalte als direkte Kinder des DOM-Knotens.

<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> 

Was sind meine besten Optionen, um diese korrekt zu laden? I.E "my-directive" kann auf ctl_a.fname zugreifen, und "nested-directive" kann auf $ scope.incoming zugreifen, da das Argument von "ctl_a.a_counter" übergeben wird.

Here is a plunk, die die Probleme veranschaulicht, die ich verwende, um $ compile zu verwenden. Wenn ich $ compile verwende, werden die verschachtelten Anweisungen zweimal ausgeführt. Einmal für die kompilierte Methode der äußeren Direktive und noch einmal für die manuelle. Schlimmer noch ist das manuelle das einzige, das scheint, den Inhalt richtig darzustellen.

Wenn ich ng-transclude verwende, dann funktioniert keines der Attribute, die an die innere Direktive übergeben werden, ohne vorangestellt mit $$ prevSibling oder $ parent, weil ng-transclude einen neuen Bereich zu erstellen scheint. Dies scheint grundsätzlich falsch zu sein, wenn man es so referenzieren muss.

Edit: Hier ist another plunk welche Gabeln die erste. Dieses Mal demonstriere ich ng-transclude und wie ich $ parent verwenden muss, um auf den Controller für seine Direktive zuzugreifen.

Danke.

Answer 1

Ich bin mir nicht sicher, ob das alles, was Sie wissen wollen, aber Sie müssen terminal: true auf Ihre Richtlinie Definition Objekt hinzuzufügen. Dies verhindert, dass Angular den HTML-Code innerhalb der my-directive Tags verarbeitet, bis Sie ihn selbst kompiliert haben. Modifizierter Code von Ihrem Plünderer:

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

    return directive; 

Answer 2

Es scheint, dass Sie keine Dateneigenschaft von my-directive verwenden. Sie können den folgenden Code aus der my-Direktive entfernen.

scope:{ 
     data: '=' 
    } 

Jetzt müssen Sie nicht wie unten manuell kompilieren. Also entferne es auch.

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

Arbeiten plunkr