Wie verhält sich ng-transclude wie ng-include (in Bezug auf den Umfang)?

Question

Ich möchte Inhalte als solche überführen, dass es sich so verhält, als würde ich den Inhalt in die Datei kopieren, in die ich meine <div data-ng-transclude=""> schreibe. Wie mache ich das?

Ich weiß, ich kann ng-include verwenden, um eine Vorlage zu enthalten, und ich kann Skript-Tags verwenden, um eine Vorlage zu definieren. Dadurch wird jedoch der Vorlagencache unübersichtlich und der Vorlagennamespace wird verschmutzt.

ich dies tun wollen, so dass ich eine haben kann (oder mehr! Das ist der springende Punkt) Datei, in der ich die Art, wie ich meine Artikel wollen definieren, um anzuzeigen,

<!-- list directive to show the items --> 
<div data-item-list="" data-values="vm.items"> 

    <!-- content to include to display list items --> 
    <div class="form-relation-picker-value" ng-bind="item.value.title"></div> 
    <div class="form-relation-picker-subtitle" ng-bind="item.value.subTitle"></div> 
</div> 

und eine Datei, in der Ich definiere, wie die Listenstruktur funktioniert.

<div class="list-container"> 
    <div class="list-item" 
     data-ng-click="vm.select(item)" 
     data-ng-repeat="item in vm.items | orderBy : vm.orderBy" 
     data-selected="{{vm.isSelected(item)}}"> 

     <div class="flex"> 
      <div ng-transclude=""></div><!-- item display via transclude --> 
      <div class="grid-col flex-icon form-relation-picker-chrome-height-fix"> 
       <div data-ng-show="vm.isSelected(item)" class="icon check"></div> 
      </div> 
     </div> 
    </div> 
</div> 

---

Dies funktioniert, wenn ich so etwas tun:

<div data-item-list="" data-values="vm.items" data-template-to-use="randomhash"> 
    <script type="text/ng-template" id="randomhash"> 
     <div class="form-relation-picker-value" ng-bind="item.value.title"></div> 
     <div class="form-relation-picker-subtitle" ng-bind="item.value.subTitle"></div> 
    </script> 
</div> 

mit einer Listenstruktur wie so ...

<div class="list-container"> 
    <div class="list-item" 
     data-ng-click="vm.select(item)" 
     data-ng-repeat="item in vm.items | orderBy : vm.orderBy" 
     data-selected="{{vm.isSelected(item)}}"> 

     <div class="flex"> 
      <div data-ng-include="vm.templateToUse"></div> 
      <div class="grid-col flex-icon form-relation-picker-chrome-height-fix"> 
       <div data-ng-show="vm.isSelected(item)" class="icon check"></div> 
      </div> 
     </div> 
    </div> 
</div> 

Aber, wie ich schon sagte, es clutters der Vorlagencache.

Wenn ich den Inhalt übersetze, dann funktioniert es nicht mehr, da der übersetzte Inhalt mit dem Geltungsbereich der Richtlinie bewertet wird, die <div data-item-list="" enthält. Das heißt, "Element" existiert nicht.

Wie kann ich dafür sorgen, dass der übertragene Inhalt im Geltungsbereich der Richtlinie einschließlich des übertragenen Inhalts bewertet wird?

Answer 1

Was Sie benötigen, ist eine Template-Funktion, die den Inhalt Ihres Template-Elements (das Element wie es in Ihrem HTML erscheint, bevor Angular es kompiliert) extrahiert und in die Vorlage der Direktive einbindet.

Wie in the docs beschrieben, kann die template-Eigenschaft des DDO eine Funktion sein. In diesem Fall erhält sie das Schablonenelement als Argument (unter anderem) und erwartet, dass die Vorlage der Anweisung als Zeichenfolge zurückgegeben wird.

Sie können so etwas wie folgt verwenden:

.directive('itemList', function itemListDirective() { 
    // DDO 
    return { 
    ... 
    template: function itemListTmplFn(tElem) { 
     var customContent = tElem.html(); 

     return '...' + customContent + '...'; 
    } 
    }; 
}) 

hier ein simple demo ist, der die .component() API verwendet (in v1.5 eingeführt). Es gibt einige kleine Unterschiede, wenn Sie eine einfache alte .directive() verwenden möchten, aber Sie sollten in der Lage sein, es leicht anzupassen.