angularjs - 如何在ng-grid中渲染html格式的内容？

Question

我有 jsonData，其中包含 HTML 内容。我想在 ng-grid 中渲染该 HTML。但是，内容不会呈现 - 它仅以普通字符串格式显示。

下面是显示所有代码的plnkr:

http://plnkr.co/edit/RlWyDqCUUR15dmLM7ePV?p=preview

Answer 1

这里发生了一些事情:

1. 与您的确切问题无关，但您的名字字段中有嵌套单引号。您需要进行一些转义，否则您的 ng-click 表达式将被破坏。因此，您可以执行 ng-click=\"show('F:/cox/main .html')\".
2. 也与您的确切问题无关，但如果您想从 UI-Grid 内部访问 Controller 作用域上的属性，则需要使用 appScope。它的文档在这里:http://ui-grid.info/docs/#/tutorial/305_appScope
3. 从应用内部提供的 HTML 进行渲染的主要问题是严格的上下文转义。

Angular 中默认启用严格上下文转义 (SCE)，并转义任何任意 HTML 以防止 XSS 和点击劫持等情况。为了让您的 HTML 显示出来，您需要信任它，并使用 HTML 绑定(bind)表达式将其绑定(bind)。

您可以使用$sce服务来信任HTML。只需迭代您的行并执行 $sce.trustAsHtml(row.firstName) 即可。 (您可以在此处阅读有关 SCE 的更多信息:https://docs.angularjs.org/api/ng/service/$sce)然后您将需要一个自定义单元格模板来绑定(bind) HTML。最简单的如下所示:

<div class="ui-grid-cell-contents" ng-bind-html="COL_FIELD"></div>

COL_FIELD 将由 UI-Grid 转换为适合您字段的绑定(bind)。现在的问题是你的 ng-click 指令没有被编译。您需要使用一个指令来获取自定义 HTML 并对其进行编译。您可以自己推出，或使用类似此库的内容来为您完成此操作:https://github.com/incuna/angular-bind-html-compile

要记住的主要事情是能够真正信任 HTML 的来源。如果您不能确定，那么采用另一种方式(即不在数据集中提供 HTML)会更好。

我已经修改了你的插件以显示所有这些协同工作:http://plnkr.co/edit/MgLoeGBoRTi2fF3e6pia?p=preview