Tried to read about $compile, $parse and $eval however cannot get understand how to store a template in a variable then use it during rendering processes.
What I would like to achieve:
code:
const data = {
template: 'test {{foo}} some text {{bar}}',
}
html:
<p> some text </p>
<h1> <included in here: data.template> </h1>
result:
<p> some text </p>
<h1> test ... some text ... </h1>
Any ideas how to achieve this ?
By simple way you can create an html file for your template and use ng-include directive, so ng-include directive will the thing for you out of the box
my-template.html
<div>
<p> some text </p>
<h1> <included in here: data.template> </h1>
</div>
Or you can also create an ng-template on html page itself like shown below
<script type="text/ng-template" id="my-template.html">
<div>
<p> some text </p>
<h1> <included in here: data.template> </h1>
</div>
</script>
Usage:
Your consumer page
<ng-include
src="'my-template.html'">
</ng-include>
I understand by this solution you can end up creating multiple template html file or script templates. So other way around to solve this problem you can create your own directive and compile the content manually and render it inside a DOM manually.
Directive
.directive("dynamicContent", function($compile, $parse){
return{
link: function(scope, element, attrs) {
var linkFn = $parse(attrs.template);
var content = linkFn(scope)
// creating template wrapper around
var wrapper = `<div>${content}</div>`
var tempate = $compile(wrapper)(scope)
element.append(tempate);
}
}
});
