如何在 ng-grid 列标题中呈现 html 格式的文本

我在一个配置文件中有 5 个列名，我将其读入一个名为 javascript 中的 columns 的数组中。

var columns = [];
var columnNames = [];
var columnCount = 5;
$scope.nettingGridOptions = {
        data : 'tableData',
        columnDefs: 'columnNames'
}

接下来，我只需迭代列数组并在中分配值columnNames数组以便我的 ng-grid 开始显示正确displayName.

for(i=0;i<columnCount;i++)
    {       
        columnNames[i] = { field: i, displayName: columns[i], headerClass : "myPersonalHeaderClass"};
    }

我遇到的问题是列名太大。我想将列名称（例如“aaaaaaaa bbbbbbbb cccccccc”）拆分为三行并将列名称显示为

啊啊啊啊啊
bbbbbbbb
cccccccc

存储这些列名称的配置文件，我尝试编辑它以在我想要拆分的位置添加
标记，但是
渲染页面时，标签未得到解释，我看到列名称为 aaaaaaaa
bbbbbbbbbb
cccccccc

我想我必须使用headerCellTemplate，但不太确定我应该在那里做什么来告诉它渲染{{col.displayName}}作为 HTML。

看到 lort 给出的答案后（参见下面的第一个答案）-我尝试了一些方法，但仍然不起作用。

Hello,

谢谢 Lort，我正在尝试使用模板，如上所述https://github.com/angular-ui/ng-grid/wiki/Template.

这就是我所做的（将您使用 ng-html-bind 的建议与上面链接建议的更新模板的方式合并）。

var myHeaderCellTemplate = '<div class="ngHeaderSortColumn {{col.headerClass}}" ng-style="{\'cursor\': col.cursor}" ng-class="{ \'ngSorted\': !noSortVisible }">'+
    '<div ng-click="col.sort($event)" ng-class="\'colt\' + col.index" class="ngHeaderText" ng-bind-html="col.displayName"></div>'+
    '<div class="ngSortButtonDown" ng-show="col.showSortButtonDown()"></div>'+
    '<div class="ngSortButtonUp" ng-show="col.showSortButtonUp()"></div>'+
    '<div class="ngSortPriority">{{col.sortPriority}}</div>'+
    '<div ng-class="{ ngPinnedIcon: col.pinned, ngUnPinnedIcon: !col.pinned }" ng-click="togglePin(col)" ng-show="col.pinnable"></div>'+
    '</div>'+
    '<div ng-show="col.resizable" class="ngHeaderGrip" ng-click="col.gripClick($event)" ng-mousedown="col.gripOnMouseDown($event)"></div>';


    for(i=0;i<columnCount;i++)
    {           
        columnNames[i] = { field: i, displayName: columns[i], headerClass : "myPersonalHeaderClass", headerCellTemplate: myHeaderCellTemplate};
    }

当我这样做时，列标题变为空白！！！！帮助！

如果你想在列名中渲染HTML，你需要改变一个模板headerCellTemplate.html in ngGridJS 文件。为此，请在该模板中找到以下代码：

<div ng-click=\"col.sort($event)\" ng-class=\"'colt' + col.index\" class=\"ngHeaderText\">{{col.displayName}}</div>

并将其更改为：

<div ng-click=\"col.sort($event)\" ng-class=\"'colt' + col.index\" class=\"ngHeaderText\" ng-bind-html=\"col.displayName\"></div>

如果您对修改外部库内容不满意，可以覆盖该模板run()您的应用程序使用的方法$templateCache:

// Assuming you have
// var app = angular.module(...);
// somewhere before following code
app.run(function($templateCache){
    $templateCache.put("headerCellTemplate.html",
    "<div class=\"ngHeaderSortColumn {{col.headerClass}}\" ng-style=\"{'cursor': col.cursor}\" ng-class=\"{ 'ngSorted': !noSortVisible }\">" +
    "    <div ng-click=\"col.sort($event)\" ng-class=\"'colt' + col.index\" class=\"ngHeaderText\" ng-bind-html=\"col.displayName\"></div>" +
    "    <div class=\"ngSortButtonDown\" ng-show=\"col.showSortButtonDown()\"></div>" +
    "    <div class=\"ngSortButtonUp\" ng-show=\"col.showSortButtonUp()\"></div>" +
    "    <div class=\"ngSortPriority\">{{col.sortPriority}}</div>" +
    "    <div ng-class=\"{ ngPinnedIcon: col.pinned, ngUnPinnedIcon: !col.pinned }\" ng-click=\"togglePin(col)\" ng-show=\"col.pinnable\"></div>" +
    "</div>" +
    "<div ng-show=\"col.resizable\" class=\"ngHeaderGrip\" ng-click=\"col.gripClick($event)\" ng-mousedown=\"col.gripOnMouseDown($event)\"></div>"
);

请注意，我使用了ng-bind-html这可能不足以满足您的需求。如果是这种情况，请尝试使用ng-bind-html-unsafe（在 Angular 1.0.8 中）或阅读文档$sce.trustAsHtml()（角度 1.2+）。