ui-grid:指令作为cellTemplate

正在检查文档 custom row templates 我们可以看到 row 对象可以从行模板访问,例如: grid.appScope.fnOne(row) 。遵循示例并尝试运行此操作 一行 对象被记录到控制台。 一行 包含 entity 键,这是存储行数据的位置。

你很接近你的例子,你只需要替换 tag in tags 具有 tag in row.entity.tags 并将指令重命名为不包含破折号(因为我之前没有处理过指令,而且正在喝第一杯咖啡,所以我也有一段时间陷入了这种状态,指令名称中的破折号无法解析)。

这是一个双关语: http://plnkr.co/edit/P1o1GolyZ5wrKCoXLLnn?p=preview

var testApp = angular.module('testApp', ['ui.grid']);

testApp.directive('directivetags', function() {
  return {
        restrict: 'E',
        template: '<div>{{tag.label}}<img ng-src={{tag.image}}></div>',
        replace: true
    }
});

testApp.controller('TestCtrl', function($scope) {

  $scope.grid = {
    rowHeight: 50,
    data: [{
      name: 'Test',
      tags: [{
        label: 'Suwako Moriya',
        image: 'http://i.imgur.com/945LPEw.png'
      }]
    }],
    columnDefs: [
          { field: 'name'},
          { field: 'tags',
            cellTemplate: '<div style="height: 50px" ng-repeat="tag in row.entity.tags"><directivetags></directivetags></div>'
          }
    ]};
});