Icône d'épingle pour Angular UI-Grid

Question

Je cherche à montrer une petite image à côté du nom de la colonne sur les colonnes qui sont épinglées juste pour que ce soit plus évident. J'utilise déjà un en-tête personnalisé car j'affiche une icône de menu pour chaque colonne donnant des fonctionnalités par colonne, mais je ne sais pas trop comment savoir si la colonne est épinglée et puis afficher une image lorsqu'elle est épinglée.

Voici mon en-tête personnalisé actuelle:

var newValuesColumnHeaderTemplate = '<div role="columnheader"' + 
    '  ng-class="{ \'sortable\': sortable }"' + 
    '  ui-grid-one-bind-aria-labelledby-grid="col.uid + \'-header-text \' + col.uid + \'-sortdir-text\'"' + 
    '  aria-sort="{{col.sort.direction == asc ? \'ascending\' : (col.sort.direction == desc ? \'descending\' : (!col.sort.direction ? \'none\' : \'other\'))}}">' + 
    ' <div class="list-icon">' + 
    '  <span class="glyphicon glyphicon-list" ng-click="grid.appScope.editOptionValues(col.field)"></span>' + 
    ' </div>' + 
    '' + 
    ' <div role="button"' + 
    '   tabindex="-1"' + 
    '   style="padding-left:15%"' + 
    '   class="ui-grid-cell-contents ui-grid-header-cell-primary-focus"' + 
    '   col-index="renderIndex"' + 
    '   title="TOOLTIP">' + 
    '  <span class="ui-grid-header-cell-label"' + 
    '    ui-grid-one-bind-id-grid="col.uid + \'-header-text\'">' + 
    '   {{ col.displayName CUSTOM_FILTERS }}' + 
    '  </span>' + 
    '  <span ui-grid-one-bind-id-grid="col.uid + \'-sortdir-text\'"' + 
    '    ui-grid-visible="col.sort.direction"' + 
    '    aria-label="{{getSortDirectionAriaLabel()}}">' + 
    '   <i 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 }"' + 
    '    title="{{col.sort.priority ? i18n.headerCell.priority + \' \' + col.sort.priority : null}}"' + 
    '    aria-hidden="true">' + 
    '   </i>' + 
    '   <sub class="ui-grid-sort-priority-number">' + 
    '    {{}}' + 
    '   </sub>' + 
    '  </span>' + 
    ' </div>' + 
    ' <div role="button"' + 
    '   tabindex="-1"' + 
    '   ui-grid-one-bind-id-grid="col.uid + \'-menu-button\'"' + 
    '   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}"' + 
    '   ui-grid-one-bind-aria-label="i18n.headerCell.aria.columnMenuButtonLabel"' + 
    '   aria-haspopup="true">' + 
    '  <i class="ui-grid-icon-angle-down"' + 
    '   aria-hidden="true">' + 
    '    ' + 
    '  </i>' + 
    ' </div>' + 
    ' <div ui-grid-filter></div>' + 
    '</div>'; 

Answer 1

Une façon de contourner cela peut être de cibler les colonnes épinglés via CSS, par exemple (En supposant FontAwesome a été référencé pour les images):

.ui-grid-pinned-container .ui-grid-header-cell { 
    position: relative; 
} 

.ui-grid-pinned-container .ui-grid-header-cell:after { 
    position: absolute; 
    font-family: 'FontAwesome'; 
    content: '\f08d'; // fa-thumb-tack 
    font-size: .75em; 
    right: 2em; 
    top: 0.5em; 
    width: 1em; 
    height: 1em; 
} 

Voir: http://plnkr.co/edit/RU4KnysM6s0aeYzI3KYJ?p=preview