如何使用$se.trustAsHtml在trNgGrid中显示html内容

how to show html content in trNgGrid with $sce.trustAsHtml

本文关键字：显示 html 内容 trNgGrid 何使用 se trustAsHtml      更新时间：2023-09-26

我有一个使用trNgGrid.js的带有搜索选项的表。我查询Sharepoint列表，其中一列包含html内容，我想显示它。

为此，我在promise中使用$sce.trustAsHtml，但这不起作用。所以经过一些测试，我注意到在完成$scope.requests.push(item)之后，我可以做这样的事情：

$scope.requests[x].SubjectText = $sce.trustAsHtml($scope.requests[x].HTMLContent);

这或多或少是有效的，因为SubjectText列不是用来显示html的，所以它所做的是将其显示为纯文本。

另一方面，如果我做这样的事情，什么都不会发生：

$scope.requests[x].HTMLContent = $sce.trustAsHtml(angular.copy($scope.requests[x].HTMLContent));

并且该列没有数据。最奇怪的是，如果我做了完全相同的事情，但没有告诉我把值放在哪个项目上，它就起作用了，所以html内容以完美的方式显示，但所有项目都有相同的值，这是承诺中的最后一个。

$scope.requests.HTMLContent = $sce.trustAsHtml(angular.copy($scope.requests[x].HTMLContent));

我在trNgGrid中做了一个更改，帮助我在有文件名的情况下在div中有一个ng-bind-html。

另一个选项是创建一个自定义列，您可以在其中使用ng-bind-html指令：

angular
        .module('myApp', ['trNgGrid'])
        .controller("MainCtrl", ["$scope", "$sce", function ($scope, $sce) {
            $scope.myItems = [
                     {
                         name: "Moroni", 
                         age: 50,
                         htmlContent: $sce.trustAsHtml('<i><b>HTML Content #1</b></i>')
                     },
                     {
                         name: "Tiancum", 
                         age: 43, 
                         htmlContent: $sce.trustAsHtml('<div class="text-danger">HTML Content #2</div>')
                     },
                     {
                         name: "Jacob", 
                         age: 27,
                         htmlContent: $sce.trustAsHtml('<div class="text-info">HTML Content #3</div>')
                     },
                     {
                         name: "Nephi", 
                         age: 29,
                         htmlContent: $sce.trustAsHtml('<div class="text-warning">HTML Content #4</div>')
                     },
                     {
                         name: "Enos", 
                         age: 99,
                         htmlContent: $sce.trustAsHtml('<pre>HTML Content #5</pre>')
                     }];
            }]);
<link href="//maxcdn.bootstrapcdn.com/bootswatch/3.0.3/slate/bootstrap.min.css" rel="stylesheet"/>
<link href="//moonstorm.github.io/trNgGrid/release/trNgGrid.min.css" rel="stylesheet"/>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.1/angular.min.js"></script>
<script src="//moonstorm.github.io/trNgGrid/release/trNgGrid.min.js"></script>
<body ng-app="myApp">
    <div ng-controller="MainCtrl">
        <table tr-ng-grid items="myItems" fields="['name','age']">
            <thead>
                <tr>
                    <th><div></div></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <div ng-bind-html="gridItem.htmlContent"></div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

如果您不将HTML与数据分离（我一直建议您这样做），那么您需要fields属性来阻止网格自动拾取htmlContent数据成员。

相关文章：