我正在尝试在从服务器发送的 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 以包含正确的字段绑定(bind)。 cellTemplate 使用 ng-bind-html
和以下 trusted
过滤器来显示未转义的 HTML:
app.filter('trusted', function ($sce) {
return function (value) {
return $sce.trustAsHtml(value);
}
});
关于javascript - 无法在 Angular UI-Grid 中显示安全的 html,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32467402/