如何避免使用Angularjs在UI网格单元中显示html代码

Question

我传递给ui-grid的字段是一个html片段。 像这样：

<span style="color:BLACK; cursor: pointer; text-decoration: underline;" onclick="openForm(154,68962)">PENDING</span>

ui-grid在单元格内显示html代码。 我不想显示html，而是显示点击事件有效的范围。 我试图像这样将其分配给ui-grid字段{{ COL_FIELD }}但是它不起作用：

{ displayName: 'Form Status', field: 'FormStatus', headerCellClass: 'center', width: '80', enableColumnMenu: false, cellClass: 'text-center', cellTooltip: true, cellTemplate: {{COL_FIELD}} },

Answer 1

您可以在UI Grid中尝试cellTemplate ，例如代码，

var linkCellTemplate = '<div class="ngCellText" ng-class="col.colIndex()">' + '<a href="{{row.getProperty(col.field)}}">Visible text</a>' + '</div>';

在Controller内定义了var linkCellTemplate并指出$scope.gridoptions类的

$scope.gridOptions = {
columnDefs: [{
                'field':'link',
                'cellTemplate':linkCellTemplate
            }]
};

Answer 2

该字段包含文本，即使此文本是有效的html代码，也将保留文本。 您试图获得的是“即时”将文本转换为html元素。 Angular使用ngBindHtml对此提供了支持。 它确实对html进行了卫生处理，并且可能会删除其中的某些部分。 如果这是一个问题，请查看这篇出色的文章 ，以获取有关如何绕过它的解释。

我认为这会稍微改变您的配置：

.... cellTemplate: <div ng-bind-html="{{COL_FIELD}}"></div>

如果让所有这些显示属性，您可能会发现未触发/找到处理程序（是否在作用域上定义了它）。 如果是这种情况，则可能必须使用ui-grid的appScope。