Verwendung von ng-transclude und ng-include in einer verschachtelten Winkel-Direktive

Question

TL; DR: Warum rendert die zweite Direktive nicht die mitgelieferte Vorlage? plunker?

Dieses Beispiel ist vereinfacht, aber ich habe tatsächlich einen Anwendungsfall, in dem das, was ich gerade versuche, sinnvoll ist.

Ich habe eine Angular-Direktive, die ng-include verwendet, um eine bereitgestellte Vorlage mit Hilfe von ng-include und ng-transclude in einen anderen HTML-Code einzufügen. Es funktioniert alleine gut.

Aber dann habe ich eine andere Direktive, die versucht, diese erste Direktive zu verwenden und das ist, wo es zusammenbricht und stillschweigend versagt.

.directive('box', ['$compile', function($compile) { 
    return { 
     restrict: 'E', 
     replace: true, 
     scope: { 
      template: '@' 
     }, 
     template: '' + 
      '<div>' + 
      ' <content>' + 
      ' <content-inner>' + 
      '  <div ng-include ng-src="{{template}}"/>' + 
      ' </content-inner>' + 
      ' </conent>' + 
      '</div>', 
     link: function(scope, element) { 
      //$compile(element)(scope); 
     } 
    }; 
}]); 

an der erzeugten Quelle der Suche kann ich sehen, dass es wie dieser es

<div template="'template.html'"> 
    <div class="foo"> 
    <div ng-transclude=""> 
     <div class="body ng-scope"> 
     <div class="close" ng-click="close()"> 
      <i class="icon-remove-sign"></i> 
      <span>Close</span> 
     </div> 
     <div ng-transclude=""> 
      <div ng-include="" ng-src="'template.html'" 
       class="ng-scope" src="'template.html'"> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

So ist der Verweis auf die Vorlage im ng-include an der innersten Ebene aussieht, ist aber nicht gemacht zu werden . Plunker.

Wohin ging meine Vorlage in der zweiten Direktive?

Answer 1

Ich denke, ich habe es geschafft, Ihr Problem zu beheben, indem Sie zwei Dinge ändern. Sehen Sie es hier: plunker.

Bei Verwendung von "@" für einen Direktivenbereich wird das Attribut als Zeichenfolge an den Bereich übergeben. Daher sollten Sie den Wert nicht zwischen einfache Anführungszeichen setzen.

Auch ich ersetzt <div ng-include ng-src="{{template}}"/> in der Vorlage mit <div ng-include="template"/> weil aus den documentation, ng-include src nicht verwenden, wenn als Attribut verwendet (aber ich verstehe nicht, warum es in Ihrem ersten Beispiel gearbeitet ...)

Hoffe, dass das trotzdem hilft.