如何在UI Grid的cellTooltip中传递Angular指令？

我之前也踩过这个坑！UI Grid的cellTooltip属性默认只会渲染静态文本或基础HTML，不会自动编译Angular指令——因为tooltip元素是动态生成的，不在Angular的作用域编译链里。下面给你几个可行的方案：

方案1：使用tooltipTemplate自定义tooltip模板 #

这是最官方的做法，UI Grid支持为列指定自定义的tooltip模板，模板里可以直接使用Angular指令。

比如你想在tooltip里用ng-bind-html或者自定义指令，代码可以这么写：

$scope.gridOptions = {
  columnDefs: [
    {
      name: 'myColumn',
      field: 'dataField',
      // 替换cellTooltip，改用tooltipTemplate
      tooltipTemplate: '<div class="ui-grid-tooltip" ng-bind-html="row.entity.tooltipContent"></div>'
      // 也可以直接放自定义指令：'<div class="ui-grid-tooltip" my-custom-directive="row.entity.someData"></div>'
    }
  ],
  // 其他网格配置...
};

模板里的作用域是UI Grid的行作用域，所以可以通过row.entity访问当前行的数据，或者col访问列的相关信息。

方案2：自定义cellTemplate+第三方tooltip指令 #

如果需要更灵活的控制（比如根据条件切换tooltip内容或指令），可以自定义单元格模板，结合UI Bootstrap这类库的tooltip模板指令来实现，这种方式下tooltip内容会被Angular正常编译。

示例代码：

$scope.gridOptions = {
  columnDefs: [
    {
      name: 'myColumn',
      field: 'dataField',
      cellTemplate: `
        <div class="ui-grid-cell-contents" 
             uib-tooltip-template="'customTooltip.html'"
             tooltip-append-to-body="true">
          {{row.entity.dataField}}
        </div>
      `
    }
  ]
};

然后在你的HTML文件中定义对应的tooltip模板：

<script type="text/ng-template" id="customTooltip.html">
  <div my-custom-directive="row.entity.someValue"></div>
  <p class="tooltip-text">{{row.entity.tooltipDesc}}</p>
</script>

方案3：手动编译tooltip元素（进阶） #

如果一定要坚持用cellTooltip属性，可以监听UI Grid的tooltipShown事件，在tooltip显示后手动用Angular的$compile服务编译它。

示例代码：

$scope.gridOptions = {
  columnDefs: [
    {
      name: 'myColumn',
      field: 'dataField',
      cellTooltip: '<div my-custom-directive="{{row.entity.someData}}"></div>'
    }
  ],
  onRegisterApi: function(gridApi) {
    gridApi.tooltip.on.tooltipShown($scope, function(tooltip) {
      // 获取tooltip的DOM元素内容
      var tooltipContent = tooltip.element.contents();
      // 用tooltip对应的行作用域编译内容
      $compile(tooltipContent)(tooltip.scope);
    });
  }
};

额外注意事项 #

• 确保你的自定义指令的restrict属性包含E（元素）或A（属性），这样才能被正确识别编译。
• 如果tooltip里包含动态HTML内容，记得用$sce.trustAsHtml()处理内容，避免Angular的安全拦截。

内容的提问来源于stack exchange，提问作者Ajinkya Kale