AngularJS iTunes应用升级ui-grid后cellTemplate图片无法显示求助

我刚帮几个开发者处理过类似的ng-grid转ui-grid适配问题，你的核心问题是cellTemplate里的数据绑定方式不兼容——原来ng-grid的grid.getCellValue方法在ui-grid中不再适用，得换成ui-grid的标准方式来获取行数据。下面是针对你两个列的具体修复方案：

1. 视图图标（View列）修复 #

你原来的模板用了grid.getCellValue(row, col)来获取跳转URL，但ui-grid里要直接通过row.entity[col.field]（或者明确写row.entity.View）来访问行数据。另外可以简化模板结构，去掉不必要的类：

修改后的View列配置：

{
  field: 'View',
  displayName: 'View',
  width: 60,
  cellTemplate: '<div class="ui-grid-cell-contents">' +
    '<a ng-href="{{row.entity[col.field]}}">' +
      '<img ng-src="https://images.onlinelabels.com/images/clip-art/emyller/emyller_magnifying_glass.png" height="30px" width="30px" />' +
    '</a>' +
  '</div>'
}

关键修改点： #

• 用row.entity[col.field]替代grid.getCellValue(row, col)，这是ui-grid中获取当前单元格对应行数据的标准方式
• 去掉了冗余的ng-binding ng-scope类，ui-grid会自动为单元格添加必要的样式类
• 如果你的View字段存储的是完整有效URL，ng-href会正确解析跳转链接

2. 专辑封面（AlbumArt列）修复 #

同样的，专辑图片的地址需要通过row.entity[col.field]获取，同时建议添加样式确保图片适配单元格大小：

修改后的AlbumArt列配置：

{
  field: 'AlbumArt',
  displayName: 'Album Cover',
  width: 110,
  cellTemplate: '<div class="ui-grid-cell-contents">' +
    '<img ng-src="{{row.entity[col.field]}}" style="max-width:100%; max-height:100%;" />' +
  '</div>'
}

关键修改点： #

• 用row.entity[col.field]获取图片URL，确保绑定到正确的数据源字段
• 添加max-width:100%; max-height:100%;样式，避免图片超出单元格范围
• 暂时去掉lazy-src指令（如果不是必须的），先测试图片是否能正常显示，排除懒加载指令的干扰；如果需要懒加载，要确保该指令能在ui-grid的单元格作用域中正常工作

额外注意事项 #

• 数据源验证：先确认你的数据源中，View和AlbumArt字段确实存储了有效URL（可以在控制台打印$scope.yourDataSource检查）
• 转义字符问题：如果是在JS字符串中写cellTemplate，注意转义是否正确；如果项目支持ES6模板字符串，可以用反引号包裹模板，避免繁琐的转义：

  cellTemplate: `
    <div class="ui-grid-cell-contents">
      <a ng-href="{{row.entity[col.field]}}">
        <img ng-src="https://images.onlinelabels.com/images/clip-art/emyller/emyller_magnifying_glass.png" height="30px" width="30px" />
      </a>
    </div>
  `
  

• ui-grid版本兼容性：确保你使用的ui-grid版本是稳定版，避免版本bug导致的渲染问题

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