2

我正在研究一个可以接受各种数据源的表指令，对标记进行规范化。我遇到了一个问题，我的数据对象rows可以有自己的孩子。使用这个 SO post，我构造了一个新指令，其中包含一个递归函数来生成我想要的 HTML，使用这个：

<nested-rows rows="rows" columns="columns"></nested-rows>

但是，由于行数据的动态特性，我没有静态定义我的 td。

从历史上看，我是这样做的：

<td ng-repeat="column in columns">
  <cell-content renderer-id="column.rendererId" content="row[column.id]">
  </cell-content>
</td>

我们只是简单地迭代列数组，将 row.someColumn 的值传递到单独的指令中以生成不同的单元格内容（列表、按钮、图标等），其中row.someColumn包含该特定列/列的必要数据类型。

我遇到的问题在于这个新指令。我没有变量row了，所以调用row[column.id]返回未定义。这是我的指令：

.directive('nestedRows', function($compile) {
    return {
        restrict: 'EA',
        replace: true,
        link: function(scope, element, attrs) {
            var html = "";
            var recursive = function(rows) {
                angular.forEach(rows, function(row, index) {
                    html +=
                        '<tr>' +
                            '<td ng-repeat="column in columns">' +
                            '<cell-content renderer-id="column.rendererId"' +
                                  'content="row[column.id]"></cell-content>' +
                            '</td>' +
                        '</tr>';
                    if(row.children) {
                        recursive(row.children);
                    }
                })
            }
            if(attrs && attrs.rows) {
                recursive(attrs.rows);
            }
            element.html(html);
            $compile(element.contents())(scope);
        }
    }
})

我需要做的是将正确的数据传递给我的 cellContent 指令。我怎样才能做到这一点？

4

1 回答 1

1

一种方法是在行指令中创建一个控制器，然后在列指令中“要求”它。

在这种情况下，控制器只是一个函数，它将在您的父指令被实例化时调用。函数返回的任何内容都将传递给在其“编译”方法的第四个参数中请求控制器的指令。

有关示例，请参阅我的 ng-scroller 指令

另请参阅此处的详细说明

于 2013-06-03T21:14:35.160 回答