Question

我是棱角分明的新人，我正在努力做一些工作，以轻松创建具有功能的表格，如CRUD函数。

例如：

我有以下声明：

<custom-table datasource="persons" headers="headers">
        <custom-column header="header" display-member=""/>
        <custom-column header="header" display-member=""/>
</custom-table>

我的自定义表是一个返回表元素的指令。问题是，我必须读取所有列以构建表的标题和正文，但我无法弄清楚我如何读取我作为指令内容传递的列...（我正在尝试尽量少用jquery）

我唯一可以实现它的是读取每列分开，但这样做，我将无法正确构建表。我想象的场景是，读取所有列声明，构建表头，并为body添加ng-repeat。

任何帮助都会被贬低。

Answer 1

为了获取指令的内容（您的列定义），您可以做几件事。但是这是角度的一些高级用法，并且不确定你是否应该按照这种方式做你想做的事情：

1 - 使用transclude函数编译innerHtml。您的指令链接函数可以接收transcludeFn作为第5个参数，此函数允许您编译指令中的任何内容，并且可以根据需要使用它。

2 - 为你的指令实现编译功能。编译函数将接收html，您可以查询它以提取innerHtml。

如果我在解决相同的问题，而不是寻找指令内容，我宁愿制作表列指令。

您可能想看看angular-Ui / bootstrap项目如何实现tabs component关于它与子选项卡的关系以及它们如何相互通信的方式。

Answer 2

我认为为此目的创建指令有其优点，但是如何动态构建表。 Here's a codepen

<table>
  <thead>
    <tr>
      <th ng-repeat="value in table.data.headers">{{value}}</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="item in table.data.body">
      <td ng-repeat="property in item">{{property}}</td>
    </tr>
  </tbody>
</table>

将HTML传递给自定义指令

2 个答案: