无法在Angular UI-Grid中显示安全的html

Unable to display safe html in Angular UI-Grid

本文关键字：显示 安全 html UI-Grid Angular      更新时间：2023-09-26

我试图显示从服务器发送的UI-Grid中的html。一个例子是我的列标头，其中包含一个工具提示的HTML，它是在服务器端创建的，并连接到字符串(出于某种原因)。我需要它显示为HTML，但无论SCE设置如何，它仍然显示编码的HTML。下面是一个例子，复制了我的问题:

var app = angular.module('app', ['ngTouch', 'ui.grid']);
app.config(function($sceProvider){
    $sceProvider.enabled(false); 
}); 
app.controller('MainCtrl', ['$scope', function ($scope) {
  $scope.gridOptions = {
    columnDefs: [
      { 
        displayName: "First Name",
        field: "firstName",
        cellFilter: "exampleFilter:this"
      },
      {
        displayName: "First Name",
        field: "lastName",
      },
      {
        displayName: "First Name",
        field: "company",
      },
      {
        displayName: "First Name",
        field: "employed",
      }
    ]
  }; 
  $scope.gridOptions.data = [
    {
        "firstName": "Cox",
        "lastName": "Carney",
        "company": "Enormo",
        "employed": true 
    },
    {
        "firstName": "Lorraine",
        "lastName": "Wise",
        "company": "<span>Comveyer</span>",
        "employed": false
    },
    {
        "firstName": "Nancy",
        "lastName": "Waters",
        "company": "Fuelton",
        "employed": false
    }
];
}]);
app.filter('exampleFilter', function ($sce) {
  console.log($sce.isEnabled());
  return function (value) {
    return $sce.trustAsHtml("<span>Here</span>");
        //return (isNaN(parseFloat(value)) ? '0.0' : Number(value).toFixed(2)) + "%";
  }
});

这是我的活塞演示

您需要将cellTemplate和sce组合在一起。

{
  displayName: "First Name",
  field: "company",
  cellTemplate: '<div ng-bind-html="COL_FIELD | trusted"></div>'
}
将

COL_FIELD替换为ui-grid以包含右域绑定。cellTemplate使用ng-bind-html和下面的trusted过滤器来显示未转义的HTML:

app.filter('trusted', function ($sce) {
  return function (value) {
    return $sce.trustAsHtml(value);
  }
});

http://plnkr.co/edit/rOWDQkFrQh24DWmIbhZx?p =预览

如果你想呈现一个过滤字段的html，你可以这样做:

cellTemplate: '<div class="ui-grid-cell-contents" ng-bind-html="grid.getCellDisplayValue(row ,col)"></div>'

您可能需要安装ngSanitize插件ng-bind-html工作

相关文章：