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