将 HTML 传递给自定义指令

Passing HTML to a custom directive

本文关键字：自定义 指令 HTML      更新时间：2023-09-26

我是 angular 的新手，我正在尝试在工作中做一些事情来轻松创建具有 CRUD 函数等功能的表。

例如：

我有以下声明：

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

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

我

唯一能实现的就是单独读取每一列，但这样做，我将无法正确构建表。我想象的场景是，读取所有列声明，构建表头，并为正文放置一个 ng-repeat。

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

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

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

如果我解决同样的问题，而不是寻找指令内容，我宁愿让表列也成为指令。

您可能想看看 angular-Ui/bootstrap 项目如何实现选项卡组件，了解它与子选项卡的关系以及它们如何相互交谈。

我认为为此目的创建指令是有好处的，但是只是动态构建表格怎么样。这是一个代码笔

<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>
相关文章：