ui-grid :指令为cellTemplate

Question

我使用具有以下数据结构的ui网格：

{
 name: String,
 tags: [{label: String, image: String}] 
}

因此，网格将有两个列:名称和标记。一个行条目可以有多个与其相关联的标记(因此是Array)。每个标记有两个属性:标签和图像，图像是图像文件的路径。

我创建了一个显示标记的指令(例如directiveTags)：

为了简单起见：

<div>{{tag.label}}<img ng-src={{tag.image}}></div>

如何在cellTemplate属性gridOptions中使用此指令？我的想法是：

columnDefs: [
            { field: 'name'},
            { field: 'tags',
              cellTemplate : "<div ng-repeat="tag in tags"><directive-tags></directive-tags></div>"
            },

非常感激的帮助。

Answer 1

检查自定义行模板的文档，我们可以看到row对象可以从行模板中访问，例如：grid.appScope.fnOne(row)。按照该示例并尝试运行此示例，row对象将被记录到控制台。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>'
          }
    ]};
});