Angularjs 有 ng-bind-html-template 指令吗？答案

【问题标题】：Does Angularjs has ng-bind-html-template directive?Angularjs 有 ng-bind-html-template 指令吗？
【发布时间】：2015-05-11 04:00:54
【问题描述】：

我有一个指令，其中可以包含带有表达式的动态模板。

如果我使用ng-bind-html，则表达式不会计算，如果我使用ng-bin-template，HTML 部分将以文本（编码的 HTML）而不是 HTML 的形式返回。

那么有没有类似ng-bind-html-template 的东西？还是我必须自己做？

现在，我正在使用一个函数来允许开发人员返回呈现的 HTML 本身，但更喜欢使用模板。

更新：@charlietfl “动态模板”是指动态的东西，由最终用户定义，我不知道里面有什么。

这是我的代码：

// Columns definition in directive's config provided by the user
columns: [
    {
        title: 'نام سنجه',
        name: 'measurename',
        key: 'measurecode',
        headerTemplate: function (content, col) {
            return col.title + " <small><span class='label label-info'>واحد</span></small>";
        },
        template: function (item, content, col) {
            return item.measurename + " <small><span class=\'label label-info\'>" + item.unitname + "</span></small>";
        }
    }
],

如何渲染：

$scope.renderHeaderCell = function (col) {
    var content = col.title;

    if (isFunction(col.headerTemplate)) {
        var _content = col.headerTemplate(content, col);
        if (angular.isDefined(_content) && _content !== false) {
             content = _content;
        } else if (angular.isDefined(col.headerTemplate)) {
            content = col.headerTemplate;
            // If this is not used, the HTML content will be encoded to be safe
            return $sce.trustAsHtml(content);
        };
    }
}

如何在模板中使用：

<td ng-repeat="col in config.columns" width="200" ng-bind-html="renderHeaderCell(col)"></td>

但是，我想像这样将模板传递给配置：

headerTemplate: "{{col.title}} <small><span class='label label-info'>واحد</span></small>",

并像这样在模板中使用它：

<td ng-repeat="col in config.columns" width="200" ng-bind-html-template="col.headerTemplate"></td>

【问题讨论】：

有助于理解动态模板的含义以及如何在指令中引用它们。在指令中有多种管理模板的方法
你检查过ng-include
@Chandermani 是的，我已经尝试过了，但我无法让它工作。每个列项都需要创建一个具有唯一 id 和内容的 ng-template 脚本。即使它有效，它也将是一个肮脏的代码。你能提供一个关于如何使用ng-include 执行此操作的示例吗？
仍然有点混淆用户模板如何映射到插入点。仅基于显示的<td>，您应该能够使用指令模板本身来替换<td> 或使用子指令。指令模板基本上做你所说的bind-html-template
您的代码看起来有点损坏。您的代码中缺少一些括号。这是故意的吗？

标签： javascript angularjs templates data-binding directive

【解决方案1】：

尝试使用$sce.trustAsHtml 和ng-bind-html。在您的控制器中将您的来源设置为可信：

vm.Overview = $sce.trustAsHtml(Overview)

HTML：

<p ng-bind-html="vm.Overview"></p>

【讨论】：