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伪指令将为您提供开箱即用的功能

my-template.html

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

或者您也可以在html页面本身上创建一个ng-template，如下所示

<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

AngularJS-来自变量的模板

1 个答案: