如何在angular ui-grid中从sort图标编辑或删除title属性

Question

当用户对列进行排序然后将鼠标悬停在箭头图标上时，是否可以禁用显示标题？除了手动更改uiGridHeaderCell.html之外，我没有找到任何变体。

是否有任何选项可以删除该标题或更改它以显示当前的排序方向？

Answer 1

使用headerCellTemplate是正确的方法：

var app = angular.module('app', ['ui.grid']);
app.controller('MainCtrl', ['$scope', 'uiGridConstants',
  function($scope, uiGridConstants) {
    var sortHeaderCellTemplate = 
    //same as normal template, but title changed:  {{isSortPriorityVisible() ? 'Direction: ' + col.sort.direction : null}}
    "<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 role=\"button\" tabindex=\"0\" 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=\"{{isSortPriorityVisible() ? 'Direction: ' + col.sort.direction : null}}\" aria-hidden=\"true\"></i> <sub ui-grid-visible=\"isSortPriorityVisible()\" class=\"ui-grid-sort-priority-number\">{{col.sort.priority}}</sub></span></div><div role=\"button\" tabindex=\"0\" 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\">&nbsp;</i></div><div ui-grid-filter></div></div>";
    $scope.gridOptions = {
      enableSorting: true,
      columnDefs: [{name: 'FirstName', sort: {direction: uiGridConstants.ASC, priority:1}, 
                    headerCellTemplate: sortHeaderCellTemplate},
                   {name: 'LastName', sort: {direction: uiGridConstants.DESC, priority:2}, 
                    headerCellTemplate: sortHeaderCellTemplate},
                   {name: 'Job', enableSorting: false}],
      data: [{"FirstName": "nikky", "LastName": "OP", "Job": "Stack Overflow User"},
             {"FirstName": "Tim", "LastName": "Harker", "Job": "Stack Overflow User"},
             {"FirstName": "nikky", "LastName": "OP", "Job": "Stack Overflow User"},
             {"FirstName": "Tim", "LastName": "Harker", "Job": "Stack Overflow User"},
             {"FirstName": "nikky", "LastName": "OP", "Job": "Stack Overflow User"},
             {"FirstName": "Tim", "LastName": "Harker", "Job": "Stack Overflow User"}]
    };
  }
]);

div[ui-grid] {
  height: 235px;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.2/ui-grid.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.2/ui-grid.min.css" />
<div ng-app="app" ng-controller="MainCtrl">
  <div ui-grid="gridOptions" class="grid"></div>
</div>

如果您有任何其他问题，请询问。很乐意提供帮助！