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

Question

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

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

并且 ui 网格显示单元格内的 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

该字段包含文本，即使此文本是有效的 html 代码，它仍将是文本。您想要获得的是将文本转换为 html 元素 'on the fly'。 Angular 支持使用 ngBindHtml. It does sanitation of the html and might drop some parts of it. If this is a problem, have a look at this great article 来解释如何绕过它。

我假设这会稍微改变您的配置：

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

如果您要显示所有这些内容属性，您可能会发现您的处理程序（它是在作用域上定义的吗？）不是 triggered/found。如果是这种情况，您可能必须使用 ui-grid 的 appScope。

Answer 2

您可以在 UI 网格中尝试 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
            }]
};

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

How can I avoid showing html code in a UI-grid cell with Angularjs

html

angularjs

angular-ui-grid