javascript - 使用 Angular-editable 中的函数返回 html 而不是字符串

Question

我正在使用 Angular 构建 Web 应用程序。由于我需要一个可编辑的表格，因此我决定使用 Angular-xeditable。我遇到了以下问题。

在我的 Controller 中我有一个函数:

function xyz(param){
    return "<span>"+param+"</span>";
}

在包含表单和表格的 html View 文件中，在可编辑字段内调用该函数:

<td>
    <span editable-select="test.element" e-name="element" e-ng-click="onElementChange()" e-form="tableform" e-multiple e-ng-options="element.id as element.name for element in elements">
        {{ xyz(param) }}
    </span>
</td>

如果我像这样使用它，不幸的是在表格内没有插入跨度，但也包含包含 html 代码的文本:“paramvalue”

出了什么问题。我错过了什么吗？我需要以任何方式对返回值进行编码/解码吗？没有找到任何可能的解决方案。

非常感谢您的帮助。

Answer 1

您应该使用 Angular Directive(指令)“ng-bind-html”将字符串插入/绑定(bind)到 HTML。 Angular 为此目的提供了指令。看到这个:https://docs.angularjs.org/api/ngSanitize/service/ $ sanitizer

<div ng-bind-html="xyz(param)"></div>

假设函数 xyz 在 Controller 范围内可用。