如何在 ng-grid 中呈现 html 格式的内容? [英] How to render html formatted content in ng-grid?

问题描述

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

I have jsonData which consist of HTML content. I want to render that HTML in ng-grid. The content is not rendered however -- it only shows up in normal string format.

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

Below is the plnkr which shows all the code:

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

推荐答案

这里发生了一些事情:

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 进行渲染的主要问题是严格上下文转义.

1. Not related to your exact issue, but you've got nested single quotes in your firstName field. You need to do some escaping or your ng-click expression is going to break. So instead of ng-click='show('F:/cox/main.html')' you can do ng-click=\"show('F:/cox/main.html')\".
2. Also not related to your exact issue, but if you want to access properties on your controller's scope from inside UI-Grid you need to use appScope. The docs on it are here: http://ui-grid.info/docs/#/tutorial/305_appScope
3. The main problem with getting HTML provided from inside your app to render is Strict Contextual Escaping.

严格上下文转义 (SCE) 在 Angular 中默认启用并转义任何任意 HTML 以防止诸如 XSS 和点击劫持之类的事情.为了让您的 HTML 显示出来，您需要信任它，并使用 HTML 绑定表达式绑定它.

Strict Contextual Escaping (SCE) is enabled by default in Angular and escapes any arbitrary HTML to prevent things like XSS and clickjacking. In order to get your HTML to show up you need to trust it, and bind it with an HTML bind expression.

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

You can use the $sce service to trust the HTML. Just iterate over your rows and do $sce.trustAsHtml(row.firstName). (You can read more about SCE here: https://docs.angularjs.org/api/ng/service/$sce) Then you will need a custom cell template to bind the HTML. The simplest one looks like this:

<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

COL_FIELD will get transformed by UI-Grid into the proper binding for your field. Now the problem is that your ng-click directive doesn't get compiled. You need to use a directive that will take your custom HTML and compile it. You could roll your own, or use something like this library to do it for you: https://github.com/incuna/angular-bind-html-compile

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

The main thing to keep in mind is being able to actually trust the source of your HTML. If you can't be sure then going about this another way (i.e. by not providing HTML inside your data set) would be better.

我已经修改了您的 plunker 以显示所有这些协同工作:http://plnkr.co/edit/MgLoeGBoRTi2fF3e6pia?p=预览

I've modified your plunker to show all this working together: http://plnkr.co/edit/MgLoeGBoRTi2fF3e6pia?p=preview

这篇关于如何在 ng-grid 中呈现 html 格式的内容?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！