如何避免在Angularjs的UI-grid单元格中显示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>';

在控制器中定义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.