AngularJS中如何在SlickGrid内处理行数据以正确显示转义HTML实体

SlickGrid默认使用原生DOM渲染逻辑，不经过Angular模板编译，因此直接使用ng-bind-html不会生效。针对大数据量场景下的转义字符还原需求，有两种可落地的实现方案：

方案一：轻量HTML实体还原（推荐，适合大数据量场景） #

该方案无需依赖Angular的编译与消毒逻辑，使用原生API实现转义字符还原，性能开销极低，不会引入额外的XSS风险，仅还原</>等HTML实体为原始字符：

// SlickGrid 列配置示例
const columnDefs = [
  {
    id: 'targetColumn',
    name: '展示列名',
    field: '后端返回的对应字段key',
    // 自定义单元格格式化函数
    formatter: (row, cell, value) => {
      const tempTextarea = document.createElement('textarea');
      tempTextarea.innerHTML = value;
      // 自动将所有HTML转义实体还原为原始字符
      return tempTextarea.value;
    }
  },
  // 其他列配置...
]

方案二：兼容Angular ng-bind-html 消毒逻辑 #

如果需要复用Angular的$sce消毒能力，支持更复杂的HTML内容渲染，可通过自定义Formatter+手动编译模板实现：

1. 首先将$compile、$sce服务注入到对应的控制器中
2. 列配置的Formatter输出带ng-bind-html属性的DOM标签
3. 在SlickGrid的渲染完成事件中批量编译未处理的Angular模板

angular.module('yourApp').controller('GridController', ['$scope', '$compile', '$sce', function($scope, $compile, $sce) {
  // 列配置
  $scope.columnDefs = [
    {
      id: 'targetColumn',
      name: '展示列名',
      field: '后端返回的对应字段key',
      formatter: (row, cell, value) => {
        const trustedHtml = $sce.trustAsHtml(value);
        return `<span data-ng-bind-html="\`${trustedHtml}\`"></span>`;
      }
    }
  ];

  // SlickGrid实例初始化后监听渲染完成事件
  $scope.grid.onRenderCompleted.subscribe(() => {
    const gridContainer = angular.element(document.querySelector('.slickgrid-container'));
    $compile(gridContainer)($scope);
    if (!$scope.$$phase) $scope.$apply();
  });
}]);

注意事项 #

• 大数据量场景优先选择方案一，方案二存在Angular模板编译开销，会影响大批量数据的渲染性能
• 方案一默认仅还原转义实体，不会执行任何HTML代码，无需额外处理XSS风险

内容的提问来源于stack exchange，提问作者Deepak N