Question

我正在尝试构建一组处理我们网站标准表格布局的指令。为此，我创建了两个指令，一个用于表，一个用于列。 此处的目标是能够在父视图中指定表格的列。

这是实例化指令的父视图（index.html）。请注意，col-name表示我想为表中的每一行显示哪个属性。

<management-grid>
  <col-data col-name="name"></col-data>
</management-grid>

以下是managementGrid指令的相关方面。

.directive('managementGrid', function() {
  return {
    ...
    template:
      '<table>' +
        '<tbody>' +
          '<tr ng-repeat="row in collection" ng-transclude="data">' +
            '<!--The specific columns go here using col-data-->' +
          '</tr>' +
        '</tbody>' +
      '</table>',
    transclude: {
      'data': '?colData'
    },
    controller: ($scope) => {
      $scope.collection = [{'name': 'Test Row 1'},{'name': 'Test Row 2'}];
    }
  };
});

并且child指令实际上仅用于转换为td标记，因此浏览器在指令呈现之前不会丢弃它。

.directive('colData', function() {
  return {
    ...
    scope: {
      colName: '@'
    },
    template: '<td>{{colName}}: {{row[colName]}}</td>'
  };
});

在最终指令colData中，无法访问row对象。我知道我可以使用链接功能访问父控制器，但这只允许我访问collection，我需要访问使用row创建的ng-repeat。

此处Fiddle显示了此问题。

修改理想情况下，我可以简单地转换为colData指令而不必传递属性名称。类似于<td ng-transclude></td>和父视图<col-data>{{row.name}}</col-data>

Answer 1

我能够在子指令中使用$parent来解决这个问题。这将访问父范围。 See the updated fiddle here

如何从父指令视图访问数据？

1 个答案: