Question

我一直在尝试创建一个angularJS组件，以便从提供的数组构造动态html表。组件模板包含一些ng-transclude指令，作为组件使用者提供的模板的“占位符” /插槽。

是否可以包含<tr>模板（嵌套<th>）以供在表<thead>中使用？

我尝试使用所有变体进行转染： transclude: true，transclude: 'element' 和transclude: { header: 'header'} （第三个选项似乎是最合适的，因为我最终将需要包含多个元素）。

组件：

app.component("virtualTable", {
  bindings: {
    someArray: "<"
  },
  transclude: {
    header: "header"
  },
  templateUrl: () => {
    return "/app/components/virtual-table.component.html";
  });

组件模板：

<div>
  <table>
    <thead>
      <tr ng-transclude="header"></tr>
    </thead>
    <tbody>
      <tr ng-repeat="item in vt.someArray">
        ...another place for transclution...
      </tr>
    </tbody>
  </table>
</div>

使用HTML（组件声明）：

<virtual-table some-array="vm.personList">
    <header>
        <th>First Column</th>
        <th>Second Column<th>
    </header>
</virtual-table>

我希望编译后的DOM看起来像这样：

<table>
    <thead>
        <tr>
            <th>First Column</th>
            <th>Second Column</th>
        </tr>
    </thead>
...

但是相反，我将被包含的元素（标头）的innerHTML作为Text：

<table>
    <thead>
        <tr ng-transclude="header">
            <header class="ng-scope">
                First Column
                Second Column
        </tr>
    </header>
...

我怀疑浏览器（chrome 76）会以某种方式从已包含的元素中剥离<tr>标签，然后再将其提供给组件（因为我们非法使用<tr>在{{ 1}}）。我想维护一个html表结构。有什么办法解决这个问题？

如何将表行转换为AngularJs组件

0 个答案: