Как добавить изображение в виде заголовка в угловой сетке ui?

Question

Я хотел бы добавить изображение в заголовок, а не в строки.

var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid']); 

app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) { 
$scope.gridOptions = { 
    enableSorting: true, 
    columnDefs: [ 
    { field: 'name' }, 
    { field: 'company' }, 
    { field: '<THIS NEEDS TO BE IMAGE>' displayName: 'Timer'} 
    ], 
    data:[ 
    {name:"Name1",company:"Company1",Timer:"10"}, 
    {name:"Name2",company:"Company2",Timer:"11"},] 
}; 
}]); 

Answer 1

Я не конкретный пример, чтобы вставить в систему, но я предполагаю, что вы могли бы переопределить значение по умолчанию headerCellTemplate. Я использовал cellTemplate с изображением, но не с headerCellTemplate. Учитывая все другие функции, которые могут отображаться в заголовке, вам может потребоваться найти headerCellTemplate по умолчанию, а затем добавить изображение.

Answer 2

Как упомянутый @WadeB, вы должны использовать headerCellTemplate для этого конкретного столбца.

Я создал a Plunkr, демонстрируя возможную установку.

Вы должны добавить headerCellTemplate к вашему columnDef:

{ field: 'company', headerCellTemplate: myHeader} 

и создать свой собственный шаблон, создавая локальную переменную:

var myHeader = "<div ng-class=\"{ 'sortable': sortable }\"><!-- <div class=\"ui-grid-vertical-bar\">&nbsp;</div> --><div class=\"ui-grid-cell-contents\" col-index=\"renderIndex\" title=\"TOOLTIP\"><span>{{ col.displayName CUSTOM_FILTERS }}</span> <span ui-grid-visible=\"col.sort.direction\" ng-class=\"{ 'ui-grid-icon-up-dir': col.sort.direction == asc, 'ui-grid-icon-down-dir': col.sort.direction == desc, 'ui-grid-icon-blank': !col.sort.direction }\">&nbsp;</span></div><div class=\"ui-grid-column-menu-button\" ng-if=\"grid.options.enableColumnMenus && !col.isRowHeader && col.colDef.enableColumnMenu !== false\" ng-click=\"toggleMenu($event)\" ng-class=\"{'ui-grid-column-menu-button-last-col': isLastCol}\"><i class=\"ui-grid-icon-angle-down\">&nbsp;</i></div><div ui-grid-filter></div></div>" 

Вот немного неаккуратно, чтобы понять, важная часть :

{{ col.displayName CUSTOM_FILTERS }} 

Заменить эту часть на все, что угодно, для примера е изображение, как показано в Plunkr

var myHeader = "<div ng-class=\"{ 'sortable': sortable }\"><!-- <div class=\"ui-grid-vertical-bar\">&nbsp;</div> --><div class=\"ui-grid-cell-contents\" col-index=\"renderIndex\" title=\"TOOLTIP\"><span><img src=\"https://angularjs.org/img/AngularJS-large.png\" alt=\"Mountain View\" style=\"width:100px;height:30px;\"></span> <span ui-grid-visible=\"col.sort.direction\" ng-class=\"{ 'ui-grid-icon-up-dir': col.sort.direction == asc, 'ui-grid-icon-down-dir': col.sort.direction == desc, 'ui-grid-icon-blank': !col.sort.direction }\">&nbsp;</span></div><div class=\"ui-grid-column-menu-button\" ng-if=\"grid.options.enableColumnMenus && !col.isRowHeader && col.colDef.enableColumnMenu !== false\" ng-click=\"toggleMenu($event)\" ng-class=\"{'ui-grid-column-menu-button-last-col': isLastCol}\"><i class=\"ui-grid-icon-angle-down\">&nbsp;</i></div><div ui-grid-filter></div></div>"; 

Вы также можете переопределить шаблон глобально:

$templateCache.put('ui-grid/uiGridHeaderCell', 
    '<div>my-own-html</div>' 
);