如何在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的信息：）然后，您需要一个自定义单元格模板来绑定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