angularjs - ng-grid 列ヘッダーで HTML 形式のテキストをレンダリングする方法

Question

javascript で列と呼ばれる配列に読み込む構成ファイルに 5 つの列名があります。

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 bbbbbbbbbb cccccccc」を 3 行に分割し、列名を次のように表示したい。

アアア
アアアアアアアアアアアアアアアアアアアアアアアアアアアアアアアアアアア
アアアアア

これらの列名を保存する構成ファイルを編集して、分割したい場所に <br> タグを付けようとしましたが
、ページがレンダリングされたときにタグが解釈されず、列名が aaaaaaaa と表示されます<br> bbbbbbbbbb<br>cccccccc

を使用する必要があると思いますが、HTMLとしてheaderCellTemplateレンダリングするように指示するためにそこで何をすべきかよくわかりません。{{col.displayName}}

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

これを行うと、列ヘッダーが空白になります!!!! ヘルプ！