How to make ng-transclude behave like ng-include (in terms of volume)?

Question

I would like to transfer the content so that it acts as if I copied the contents to a file where I write <div data-ng-transclude=""> . How to do it?

I know that I can use ng-include to include a template, and I can use script tags to define a template. But it clutters up the template cache and pollutes the template namespace.

I want to do this so that I can have one (or more!) Whole file in which I determine how my elements are displayed,

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

and one file in which I determine how the list structure works.

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

---

This works if I do something like this:

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

with a list structure like this ...

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

But, as I said, it clutters up the template cache.

If I go over the content, it will stop working, because the transferred content will be evaluated with the scope of the directive containing <div data-item-list="" . That is, the "element" does not exist.

How can I make the translated content be evaluated with the scope of the directive, which includes the translated content?

Answer 1

What you need is a template function that will extract the contents of your template (the element as it appears in your HTML, before Angular compilation) and insert it into the directive template.

As described in the documents , the template property for DDO can be a function, in which case it receives the template element as an argument (among other things) and is expected to return the directive template as a string.

You can use something like this:

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

Here is a simple demo that uses the .component() API (introduced in version 1.5). There are a few minor differences if you want to use the plain old .directive() , but you should adapt it easily.