AngularJS - шаблон из переменной

Question

Попытка прочитать о $ compile, $ parse и $ eval, однако не может понять, как сохранить шаблон в переменной, а затем использовать его во время процессов рендеринга.

Чего бы я хотел достичь:

код:

const data = {
   template: 'test {{foo}} some text {{bar}}',
}

HTML:

<p> some text </p>
<h1> <included in here: data.template> </h1>

результат:

<p> some text </p>
<h1> test ... some text ... </h1>

Есть идеи, как этого добиться?

Answer 1

Простым способом вы можете создать файл html для вашего шаблона и использовать директиву ng-include, поэтому директива ng-include доставит вам все необходимое из коробки

мой-template.html

<div>
  <p> some text </p>
  <h1> <included in here: data.template> </h1>
</div> 

Или вы также можете создать ng-template на html-странице, как показано ниже

<script type="text/ng-template" id="my-template.html">
    <div>
      <p> some text </p>
      <h1> <included in here: data.template> </h1>
    </div>
</script>

Использование:

Your consumer page
<ng-include 
  src="'my-template.html'">
</ng-include>

---

Я понимаю, что благодаря этому решению вы можете создать несколько template html-файлов или шаблонов скриптов. Таким образом, для решения этой проблемы вы можете создать свою собственную директиву, скомпилировать содержимое вручную и вручную отобразить его в DOM.

Директива

.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);
        }
    }
});

Demo Plunker