如何使用 Angular 函数导出 Angular HTML 模板

Question

我想创建一个 angular 表单生成器。我有这样的模板：

<script type="text/ng-template" id="textarea.html">
    <div class="items form-group">
        <label class="col-sm-2 control-label">
            {{item.title}}
        </label>
        <div class="col-sm-10">
            <textarea ng-model="task.title" placeholder="{{item.placeholder}}" class="form-control"></textarea>
        </div>
    </div>
</script>

当用户添加此模板时生成 Angular html 代码如下：

    <div class="items form-group">
        <label class="col-sm-2 control-label">
            {{item.title}}
        </label>
        <div class="col-sm-10">
            <textarea ng-model="task.title" placeholder="{{item.placeholder}}" class="form-control"></textarea>
        </div>
    </div>

在这个例子中，我的模板代码呈现了，但我不想呈现它，只显示 angular html 代码。如果您有任何建议，请更改此代码。

Example Code

Answer 1

如果您使用普通标签，它会呈现，但如果您不想呈现，则可以使用

replace < by &lt; and > by &gt;

Answer 2

您可以使用 ng-bind 代替 ng-include；

示例：

**in app.js.**

app.run(['$injector', function($injector) {
  var rootScope = $injector.get('$rootScope');

  rootScope.tpl = '<h1 style="color:green;">This is the page content</h1>';
}])

**in index.js**

<span ng-bind='tpl'></span>

如何使用 Angular 函数导出 Angular HTML 模板

How to export Angular HTML template with Angular function

html

javascript

templates

dynamically-generated

angularjs