Question

我正在研究一个可以接受各种数据源的表指令，对标记进行规范化。我遇到了一个问题，我rows的数据对象可以拥有自己的子项。使用this 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>

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

我遇到的问题在于这个新指令。我不再有变量row，因此调用row[column.id]返回undefined。这是我的指示：

.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指令。我怎样才能做到这一点？

Answer 1

这样做的一种方法是在row指令中创建一个控制器，然后在column指令中“require”它。

在此上下文中，控制器只是在实例化父指令时将被调用的函数。函数返回的任何内容都将传递给指令，该指令在其“compile”方法的第4个参数中请求控制器。

请参阅我的ng-scroller指令了解example

另见详细说明here

AngularJS嵌套循环ng-repeat

1 个答案: