angularjs - ui-grid : directive as cellTemplate

我正在使用具有以下数据结构的 ui-grid:

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

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

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

为了简单起见 :

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

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

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

非常感谢帮助。

最佳答案

检查 custom row templates 的文档，我们可以看到 row 对象可以从行模板访问，例如: grid.appScope.fnOne(row) 。按照示例并尝试运行它，row 对象被记录到控制台。 row 包含 entity 键，这是存储行数据的地方。

你非常接近你的例子，你只需要用 tag in tags 替换 tag in row.entity.tags 并重命名你的指令不包含破折号(因为我之前没有使用过指令并且正在喝我的第一杯咖啡，我也被困在这个有一段时间，指令名称中的破折号无法解析)。

这是一个plunker: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>'
          }
    ]};
});

关于angularjs - ui-grid : directive as cellTemplate，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28324498/