Как использовать cellTooltip с cellTemplate в угловой сетке

Question

Я использую угловую сетку пользовательского интерфейса, есть один столбец, который получает html-строку в качестве входных данных, поэтому для отображения значения столбца я использую ng-bind-html в cellTemplate(который отлично работает для отображения простого внутреннего текста), но cellTooltip не ' не работает для всплывающей подсказки (это не так), если я использую title="{{row.entity.htmlfield}}" в cellTemplate, тогда он показывает строку html, но мне нужен простой текст, как я могу этого добиться?

что я использую:

$scope.datagrid={
 colDefs=[
        {
           field:'htmlfield',
           cellTemplate:'<div title="{{row.entity.htmlfield}}" ng-bind-html="{{row.entity.htmlfield}}"></div>',//html field is expecting html content
           cellTooltip:function(row,col){
           return row.entity.htmlfield //it doesn't work with cellTemplate//
}
        }
      ]

}

Answer 1

Решение 1: Удалить cellTooltip когда вы используете cellTemplate
Вы можете использовать фильтр как

app.filter('trusted', function ($sce) {
  return function (value) {
    return $sce.trustAsHtml(value);
  }
});   

И внутри cellTemplate использовать -

title="{{row.entity.htmlfield | trusted}}"

Решение 2:

Вы можете создать фильтр над строками выше и использовать его в cellFilter
Подсказки относятся к cellFilter, поэтому, если вы определите cellFilter, он также будет использоваться во всплывающей подсказке.

Надеюсь это поможет!

Answer 2

Так просто удалить cellTooltip и добавить title в теге cellTemplate div.

{
   field:'htmlfield',
   cellTemplate:'<div title="{{row.entity.htmlfield}}">{{row.entity.htmlfield}}</div>',
}

Answer 3

Мы можем использовать cellTemplate и cellTooltip, как показано ниже, например,

$scope.gridOptions = {
    columnDefs: [
      { name: 'name', cellTemplate:"<div class='ui-grid-cell-contents'  title='{{grid.appScope.customTooltip(row,col,COL_FIELD)}}'>{{COL_FIELD CUSTOM_FILTERS}}</div>"
      }
]

$scope.customTooltip = function (row,col,value) {
    console.log(row);
    console.log(col);
    return value;
  }

Я создал функцию для cellTooltip и передал ее в тег заголовка, и он работает нормально. https://plnkr.co/edit/Dcpwy5opZ9BwC8YdWf3H?p=preview

Answer 4

Я достиг цели, используя пользовательскую директиву, код для директивы

$scope.datagrid={
  colDefs=[
            {
               field:'htmlfield',
               cellTemplate:'<tool-tip text="{{row.entity.htmlfield}}"></tool-tip>',//html field is expecting html content, no need to use cellTooltip as it doesn't work//
            }
          ]
}
//create a custom directive to give required feel to your field template//
angular.module('app').directive('tooTip',function(){
          var linkFunction=function(scope,element,attributes){
                  scope.text=String(attributes['text']).replace('/<[^>]+>/gm', ''); 
          };
return{
    restrict:'E',
    template:'<div title="{{text}}">{{text}}</div>',
    link:linkFunction,
    scope:{}

};
});

Answer 5

Надо так поменять

      cellTemplate:'<div title="{{row.entity.htmlfield}}">{{row.entity.htmlfield}}</div>'

Answer 6

Оригинальный шаблон ячейки из источника пользовательского интерфейса:

"<div class=\"ui-grid-cell-contents\" title=\"TOOLTIP\">{{COL_FIELD CUSTOM_FILTERS}}</div>"

В этом шаблоне TOOLTIP и COL_FIELD и CUSTOM_FILTERS являются макросами пользовательского интерфейса.

Я определяю cellTemplate (только значок), и использую cellTooltip (с полями сообщений об ошибках), а также работаю свободно:

columnDefs: [
{
...
cellTemplate: '<span class="glyphicon glyphicon-alert" title="TOOLTIP"></span>',
cellTooltip: function( row, col ) {
                        return ...;
             }
...
}
]