如何在ng-grid列標題中呈現html格式的文本

Question

我有一個配置文件中有5個列名，我讀入了一個名爲javascript的數組中的列。

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

接下來，我只是通過列數組並columnNames陣列，這樣我的NG網開始顯示正確displayName賦值。

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

我遇到的問題是列名太大。我想拆分列名（例如，「AAAAAAAA bbbbbbbbbb CCCCCCCC」成三排，併爲

AAAAAAAAA
bbbbbbbbb
ccccccccc

存儲這些列名的配置文件中顯示的列名，我試圖編輯有一個<BR>標籤無論我想分割，但是當頁面呈現
標籤是沒有得到解釋，我看到了列名作爲AAAAAAAA <BR> bbbbbbbbbb <BR> CCCCCCCC

我認爲我必須使用headerCellTemplate，但我不確定該怎麼做才能告訴它將{{col.displayName}}呈現爲HTML。

在看到lort給出的答案之後（請參閱下面的第一個答案） - 我嘗試了一些東西，仍然無法工作。

你好，

感謝LORT，我是想作爲https://github.com/angular-ui/ng-grid/wiki/Templating描述使用模板。

這就是我所做的（將你使用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}; 
    } 

當我這樣做時，列標題變成空白！幫幫我！

Answer 1

如果要在列名中呈現HTML，則需要更改ngGrid JS文件中的模板headerCellTemplate.html。爲了做到這一點，找到下面的代碼在模板中：

<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> 

如果你不快樂有關修改外部的lib內容，您可以覆蓋該模板使用$templateCache您的應用程序的run()方法：

// 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()（Angular 1.2+）的文檔。