如何在angular ui网格中将cellTooltip与cellTemplate一起使用

Question

我正在使用角度ui网格，有一列是获取html字符串作为输入，所以要显示列值我在cellTemplate中使用ng-bind-html（它可以很好地显示纯内部文本），但是cellTooltip没有工作提示工作（它没有），如果我在cellTemplate中使用title =“{{row.entity.htmlfield}}”然后它显示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

我使用自定义指令实现了目标，指令的代码就像

$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 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创建了函数并将其传递给title标签，并且它工作正常。 https://plnkr.co/edit/Dcpwy5opZ9BwC8YdWf3H?p=preview

Answer 4

来自ui-grid源的原始cellTemplate：

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

在此模板中，TOOLTIP和COL_FIELD以及CUSTOM_FILTERS是ui-grid macro-s。

我定义了cellTemplate（仅限图标），并使用cellTooltip（带有字段错误消息），并自由工作：

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