如何在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