如何在ng-grid中呈现html格式的内容？

Question

我有jsonData，它包含HTML内容。我想在ng-grid中呈现HTML。但是，内容未呈现 - 它仅以正常的字符串格式显示。

以下是显示所有代码的plnkr：

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

Answer 1

这里有一些事情发生了：

1. 与您的确切问题无关，但您的firstName字段中已嵌套单引号。你需要做一些转义或你的ng-click表达式会破坏。因此，您可以ng-click='show('F:/cox/main.html')'代替ng-click=\"show('F:/cox/main.html')\"。
2. 也与您的确切问题无关，但如果您想从UI-Grid内部访问控制器范围内的属性，则需要使用appScope。它上面的文档在这里：http://ui-grid.info/docs/#/tutorial/305_appScope
3. 从应用程序内部提供HTML以呈现的主要问题是严格上下文转义。

Angular中默认启用严格上下文转义（SCE）并转义任意HTML以防止XSS和clickjacking之类的内容。为了让您的HTML显示，您需要信任，并将其与HTML绑定表达式绑定。

您可以使用$sce服务来信任HTML。只需遍历您的行并执行$sce.trustAsHtml(row.firstName)。 （您可以在此处阅读有关SCE的更多信息：https://docs.angularjs.org/api/ng/service/$sce）然后，您需要一个自定义单元格模板来绑定HTML。最简单的一个看起来像这样：

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

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

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

我修改了你的plunker以显示所有这些一起工作：http://plnkr.co/edit/MgLoeGBoRTi2fF3e6pia?p=preview