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

在Angular中默认启用了严格的上下文转义(SCE)，并且转义任何HTML来防止XSS和clickjacking之类的事情.为了显示您的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.

我已经修改了您的监听器，以显示所有这些信息: 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屋！